标签: unobtrusive-javascript

我有一个应用程序,它使用一些Javascript来执行基本的Ajax请求,例如自动完成和实时搜索.例如,我通过以下方式实现了实时搜索; 我发现了一些潜在的问题,并希望与您讨论这个问题,以便有更好的代码.

应用程序/控制器/ company_controller.rb

def livesearch
  @companies = Company.search(params[:query])
  render :partial => "companies", :locals => {:companies => @companies}
end

应用程序/视图/公司/ _companies.html.haml

- if companies.empty?
  None
- else
  %table#company_list
    %tr
      %th Name
      %th Description
      %th Products
      %th
    = render companies

应用程序/视图/公司/ _livesearch_box.html.haml

= content_for :scripts, "jlivesearch companies"
= form_tag "#", :autocomplete => :off, :remote => true do
  %span.light
    Search:  
  = text_field_tag :search
  :javascript
    $('#search').livesearch({
      searchCallback: update_listed_companies,
      queryDelay: 200,
      innerText: "Search companies"
    });

公共/ Java脚本/ companies.js

function update_listed_companies(query) {
  if(typeof query …

我希望我的剃刀视图看起来像这样

@Ajax.ActionLink("A", "Buy", new AjaxOptions() { HttpMethod = "Post", OnSuccess = "updateLetter" }, new { id = "letter-A" })
@Ajax.ActionLink("B", "Buy", new AjaxOptions() { HttpMethod = "Post", OnSuccess = "updateLetter" }, new { id = "letter-B" })
@Ajax.ActionLink("C", "Buy", new AjaxOptions() { HttpMethod = "Post", OnSuccess = "updateLetter" }, new { id = "letter-C" })

和我的javascript看起来像这样

function updateLetter(letter)
{
    $("#letter-" + letter).toggleClass('selected');
}

我的想法是,如果我单击A链接,它将执行ajax并在该元素上切换类.我不确定如何将它连接起来.我错过了什么？

我有两个正则表达式,我需要加入到一个,因为我在ASP.NET中使用RegularExpressionAttribute并且它不允许多个实例.

如何将以下两个正则表达式合并为一个？

.*?@(?!.*?\.\.)[^@]+$
[\x00-\x7F]

第一个检查电子邮件的域部分中没有2个连续点,第二个正则表达式检查所有字符是否为ascii

我认为它可能就像加入它们一样简单,(.*?@(?!.*?\.\.)[^@]+$)([\x00-\x7F])但这不起作用

这是与此问题相关的上一篇文章的链接

编辑:我正在使用reglarexpression属性装饰我的viewmodel的字符串属性,并使用unobtrusive将其呈现为javascript,因此它必须使用javascript进行验证.我在最初的帖子中没有提到这一点

我有一个新的应用程序开始使用Rails 2.3.8来解决稳定性问题和gem兼容性,但是我们想通过在这个应用程序中实现Rails 3样式的UJS来开始意识到Unobtrusive JavaScript.是否有任何现有的插件/ gem支持此功能？

目前,我们正在使用的jrails宝石交换jQuery的原型,因为它是更适合我们的需要.有没有一种简单的方法可以在Rails 2.3.x应用程序中将jQuery与Rails 3风格的UJS集成？

关于将链接/ <a>标签与显式hrefs一起使用到您网站中的其他网页(即href ="/ blah/blah/blah.html)与没有hrefs/divs/etc的最佳做法是什么？一个显式的href,并使用JavaScript在一个main.js文件中将其onclick设置在文档就绪处理程序中.

在网络开发方面,我不是专家,但我很高兴学习jQuery等,并发现自己订阅了Unobtrusive JavaScript的概念.虽然上面的两个选项都没有打破"HTML中没有JavaScript"这一心态的一部分,但我想我已经挂断了"从行为中分离结构和表达".虽然我更自然地在其中放置<a>标签并明确设置href,但我发现自己认为这是真正的行为,因此应该在JS中设置.

那是远远的,还是我不习惯呢？我的另一面看到了把它放在JS中的好处,b/c现在我有能力完全控制该链接的行为,而不必改变HTML中的任何内容.我想你会说我在众所周知的围栏上.请帮助我失望.=)

(一个注意事项:该网站大量使用JavaScript,因此关闭JS提供功能的概念并不是真正的问题,因为如果没有它,大多数网站将无法运行.)

当我将部分表单放在局部视图中时,除了局部视图中的表单元素之外,所有表单部分都会获得无阻碍语法.

我发现如何"应用"无阻碍语法的唯一方法是在局部视图中启动另一个表单.

视图:

@using (Ajax.BeginForm("SubmitHandler", new DefaultAjaxOptions()))
{
    @Html.EditorFor(m => m.Name)
    @Html.Partial("MyPartialView", Model)
}

PartialView:

@Html.TextBoxFor(m => m.SomeContent)

输出:

<input class="text-box single-line" data-val="true" data-val-required="This field is required." id="Name" name="Name" type="text" value="">
<input id="SomeContent" name="SomeContent" type="text" value="0">

因此,只有View中的input元素具有无阻碍语法,而部分视图没有...

有没有办法在局部视图中应用无阻碍语法,这不需要你开始一个新的表单？

在开始之前，我确实有一个非常特殊的问题，如果您想回答，请直接结束。但是，我很欢迎提出评论和建议，因此冗长的帖子。

好的，我们处理很多表格，其中一些表格很冗长，并且涉及很多领域。除顶层字段外，我们还要求能够具有可变数量的重复行（如我们所说）。例如，让我们考虑一个具有名称，姓氏和年龄的客户，而该客户可以有零个或多个地址（例如0到10），因此用户在填写表单时必须能够从表单中添加或删除联系人。因此，通常用户获取并通过“添加”按钮添加更多地址，并在每个地址旁边添加一个删除按钮。可能会有多个重复的部分以相同的形式出现，但我不会去那里。关键是，由于法律和历史原因，必须立即保存所有表格，以便可以编辑表格，

我将ASP NET MVC 2（具有单个通用控制器的强类型视图）与客户端验证和繁重的jquery脚本结合使用，以实现出色的功能。我们可能很快就要迁移到ASP NET MVC 3了，为了找到一个好的解决方案，我已经在和3一起玩了。这些地址在模型上定义为List<Address>，例如

我目前对此问题有一个可行的解决方案，但对此不满意：我有一个HTML帮助器，用于命名添加或删除按钮以及一些JavaScript以禁用验证并允许将表单回发（甚至无效），并且因为我可以找到被单击的按钮的名称，所以我拥有处理添加或删除的所有必要逻辑，并且工作得很好。

但是我发回了邮件，重新加载了表格，我正在寻找一种替代性的解决方案。这是我可以做的：

• 在客户端执行所有操作。“添加”按钮将克隆此类地址之一，而“删除”按钮将克隆remove()元素。我只需要重命名已完成的索引。我们使用的是jquery日历，它破坏了我也已修复的新元素。但是验证无法正常工作，该验证可能可以与ASP NET MVC一起使用，但是此解决方案看起来像一个非常脆弱的解决方案-一屋一卡通，在添加另一张卡之前看起来不错。
• 使用Ajax将整个页面发布，然后再次加载：这可能比我当前的解决方案更好，但略有改善。
• 使用ajax发布表单并获取JSON并使用数据来构建元素或将其删除：由于大量的客户端脚本编写，因此再次成为了纸牌屋

• 序列化表单，并使用Ajax将其发布到特定操作，并仅获取重复部分（作为局部视图）。可以重复使用控制器上的操作，并从视图本身调用该操作以返回部分视图

  好的，最后一个是我正在处理的一个，但是有一个问题。只有在一段BeginForm()时间内将表单吞没后，带有非侵入式验证的ASP NET MVC 3才起作用，而我的顶层视图只有BeginForm()局部视图，而没有局部视图。当我从视图中调用它时效果很好，但在ajax调用中却无法获得重复部分。

（题）

那么有没有办法告诉ASP NET MVC 3吐出验证数据属性，而不管它们是否位于BeginForm（）块中？老实说，如果这不是错误，那么这绝对是一项重要的功能要求。实际上，我已经使用反射器反汇编了代码，而且情况似乎就在那里。

这就是原因所在.这是生成的HTML:

    <div>
        <label for="RegisterModel_Password">Contrase&#241;a</label>
        <input class="text-box single-line password" data-val="true" data-val-length="Su Contrase&amp;#241;a debe tener al menos 6 caracteres." data-val-length-max="100" data-val-length-min="6" data-val-required="Debe escribir su contrase&amp;#241;a" id="RegisterModel_Password" name="RegisterModel.Password" type="password" value="" />
        <span class="field-validation-valid" data-valmsg-for="RegisterModel.Password" data-valmsg-replace="true"></span>

    </div>

    <div>
        <label for="RegisterModel_ConfirmPassword">Confirme Su Contrase&#241;a</label>
        <input class="text-box single-line password" data-val="true" data-val-equalto="Sus contrase&amp;#241;as no son las mismas." data-val-equalto-other="*.Password" id="RegisterModel_ConfirmPassword" name="RegisterModel.ConfirmPassword" type="password" value="" />
        <span class="field-validation-valid" data-valmsg-for="RegisterModel.ConfirmPassword" data-valmsg-replace="true"></span>
    </div>

请注意,在确认密码框中:

data-val-equalto-other="*.Password"

这应该是RegisterModel.Password,因为我猜测javascript看起来像名为"RegisterModel.Password"的输入,不是吗？

这是我的型号代码:

[Required(ErrorMessage = "Debe escribir su contraseña")]
[StringLength(100, ErrorMessage = "Su {0} debe tener al …

我在调试新闻自动收报机时遇到了困难 - 我是从头开始使用JavaScript编写的.

除了IE9(以及一些移动浏览器 - Opera Mobile)之外,它在大多数浏览器上都能正常运行.

使用Developer Tools> Profiler使我能够找到问题的根本原因.

这是一个offsetLeft确定是否旋转自动收报机的调用,即第一个元素成为最后一个元素.

function NeedsRotating() {
    var ul = GetList();
    if (!ul) {
        return false;
    }
    var li = GetListItem(ul, 1);
    if (!li) {
        return false;
    }
    if (li.offsetLeft > ul.offsetLeft) {
        return false;
    }
    return true;
}

function MoveLeft(px) {
    var ul = GetList();
    if (!ul) {
        return false;
    }
    var li = GetListItem(ul, 0);
    if (!li) {
        return false;
    }
    var m = li.style.marginLeft;
    var n = 0; …

我在我的rspec测试中使用以下代码:

describe "Save should create a BasketItem and a Basket" do
  subject { 
    lambda { 
      click_button I18n.t(:create_basket_and_add_items) 
      page.driver.browser.switch_to.alert.accept    # close the alert box
    } 
  }
  it { should change(BasketItem, :count).by(1) }
  it { should change(Basket,     :count).by(1) }
end

该click_button火灾一个不显眼的JavaScript调用,显示一条警告弹出窗口.但是,关闭警报框仅在大约50%的测试运行中成功,我猜是因为警报框在命令page.driver.browser.switch_to.alert.accept运行时并不总是在屏幕上.如果警报框未关闭,下一个测试用例当然会遇到"超时错误".

如果我sleep 1在click_button和之间使用它总是正常工作...alert.accept,但它不是一个非常好的解决方案.任何的想法？