标签: unobtrusive-javascript

我刚刚开始关注JQuery.我目前在我的网络应用程序中没有任何AJAX.

我在HTML中的现有JavaScript看起来像:

<form ...>
<p>Find what? <input ...></p>
<div class="ButtonArray">
  <a href="AddRecord.ASP&amp;Action=ADD">ADD</a>
  <a href="#" onClick="return MyFormSubmit();">FIND</a>
</div>
</form>

这将显示[添加]和[查找]的按钮.对于Find,有必要提交表单,我使用MyFormSubmit()验证数据,为页面添加视觉效果,然后POST数据.

我可以为Find按钮添加一个CLASS或ID,在JQuery中我可以编写如下内容:

$(function() {
  $(".MySearchButtonClass").click(function() {
    // validate and process form here
  });
});

在我与JQuery理解的"新手"阶段,我不明白为什么我会这样做

我的旧方法识别对象附近的方法.在用户按下按钮之前可能存在JS未加载的风险(在那里？JS的LOAD位于页面顶部).

在加载文档之前,JQuery Document Ready方法不会被激活(我假设JS已经存在并准备好运行了吗？),但它将代码移动到我的HTML文件的一个单独部分 - 所以当我在HTML源代码中看到了MyButtonArray DIV,对我来说哪些对象有方法,哪些对象没有方法不明显.

能否帮助我了解我的选择以及我应该注意的好处/问题？

编辑:我觉得DOM操作 - 比如点击任何带有类"LightBoxThumb"的缩略图时可以出现的LightBox - 会使用Unobtrusive Javascript.

但是,我正在努力说服自己,具有特定操作的按钮应该以这种方式应用其方法.(我当然不会在按钮上放任何代码而不是单个函数调用"其他地方"的东西,但在我看来,这是我最好的线索,关于那个按钮做什么,而不显眼的Javascript层可能会更难确定.)

Edit2 - 接受的答案

我已经接受了Russ Cams的回答.它以一种对我有所帮助的方式描述了Unobtrusive Javascript,以便更多地了解应该如何以及何时应该使用它.

目前(当我有更多经验时可能会改变!)我将坚持使用OnClick事件对一个对象进行单个,不变的动作,因为我觉得我更容易调试 - 并且如果出现问题则进行诊断.对于允许单击标题列进行排序(以及该类型的情况)的表上的ZebraStripes,我可以看到Unobtrusive Javascript方法的好处

Russ的最终评论特别有用,在此重复:

"@Kristen - 你是对的,就像许多编程主题一样,有不止一种方法,人们会强烈支持他们的信念!如果我们谈论单一按钮的单一方法,我完全理解你的位置来自......

如果我们讨论的是大量的JavaScript,同一个函数调用多个元素,不同的函数调用不同的方法,等等.我认为自己混合内联和不显眼的方法会更加困难,而且它会是更好地采用一种或另一种方法"

我习惯做这样的事情:

<a href="Javascript:void(0);" onclick="GetCommentForGeneralObservation(<%# Eval("ID") %>)">

这将是一个转发器或类似顺便说一句.但是我现在试图使用不引人注目的JavaScript,因此摆脱了标记中的任何JS.我试图弄清楚这样的情况下最佳做法是什么？我已经使用了属性,然后使用JQuery将值传递给AJAX调用,但它看起来有点像黑客.

根据第一个回复编辑:

我在考虑更多

从网页的结构/内容和表示中分离功能("行为层").

据我所知,这是不引人注目的JS的一部分.

这恰好适用于我不必担心Javascript在客户端被关闭的应用程序,它在我公司内部托管.我得到的是如果我通过JQuery将onclick事件附加到单独的.js文件中,我将如何从Eval("ID")获取值到JS调用中.

很抱歉没有更清楚.我很欣赏在面向公众的应用程序中逐步增强的需求.

我自己编写了一个相当大而复杂的网站,所以你认为我需要支持javascript被关闭吗？

它有很多额外的工作支持全页回发,我可以用JSON和ajax快速完成这些工作.

给定JavaScript对象中的Array Literal,访问其自己的对象的属性似乎不起作用:

 var closure =  {

         myPic : document.getElementById('pic1'),
         picArray: [this.myPic]
 }    

 alert(closure.picArray[0]); // alerts [undefined]

而通过访问其他JavaScript对象来声明一个数组项似乎有效

 ?var closure1 = {
 ?    
 ?     myPic : document.getElementById('pic1')
 ?}
 ?    
 ?var closure2 =  {
 ?  
 ?        picArray: [closure1.myPic]
 ?}    
 ?    
 ?alert(closure2.picArray[0]); // alerts [object HTMLDivElement]

示例:http: //jsfiddle.net/5pmDG/

这似乎是一种愚蠢的努力,但这是我想要学习的东西.

现在,在ASP.NET MVC 3.0中,你需要使用语法@using (Html.BeginForm()) {然后,}关闭一个表单块以获得新的'不引人注目的javascript',以免你想手工编写所有这些(这很好) ).

出于某种原因(Read: *OCD*)我不喜欢这样.我真的宁愿这样做..

@Html.BeginForm()
<div class="happy-css">
</div>
@Html.EndForm()

好像傻了吗？是的,对每个人都很好.我想知道为什么它如何工作并根据自己的喜好塑造它.所以我认为我开始挖掘的第一个地方是MVC 3.0源代码本身.所以我跳进了codeplex来找到BeginFormExtension方法.

(http://aspnet.codeplex.com/SourceControl/changeset/view/63452#288009)

所以现在我对如何开始实现目标感到有些困惑.通过阅读代码,我发现它们都归结为根方法(这并不奇怪,因为大多数扩展方法似乎都是分层方法,所有这些方法都是为了避免冗余而分成单个方法).

private static MvcForm FormHelper(this HtmlHelper htmlHelper, string formAction, FormMethod method, IDictionary<string, object> htmlAttributes) {
            TagBuilder tagBuilder = new TagBuilder("form");
            tagBuilder.MergeAttributes(htmlAttributes);
            // action is implicitly generated, so htmlAttributes take precedence.
            tagBuilder.MergeAttribute("action", formAction);
            // method is an explicit parameter, so it takes precedence over the htmlAttributes.
            tagBuilder.MergeAttribute("method", HtmlHelper.GetFormMethodString(method), true);

            HttpResponseBase httpResponse = htmlHelper.ViewContext.HttpContext.Response;
            httpResponse.Write(tagBuilder.ToString(TagRenderMode.StartTag)); …

我在用

asp.net mvc 3 jquery验证无阻碍的javascript.

我试图通过注释在服务器端编写所有验证,然后使用mvc 3的新功能来处理客户端.

我有一个对话框,上面有一个按钮(只是一个按钮而不是提交按钮),我想通过ajax将数据发布到服务器.

因此,当用户点击按钮时,我会执行表单提交并返回false以取消回发.

我认为这会触发验证但似乎并非如此.如何进行客户端验证触发器？

编辑

<form method="post" id="TaskFrm" action="/Controller/Action">

            <input type="text" value="" name="Name" id="Name" data-val-required="Name field cannot be left blank" data-val-length-max="100" data-val-length="task cannot exceed 100 characters" data-val="true">
</form>

var $dialog = $('<div></div>').dialog(
            {
                width: 580,
                height: 410,
                resizable: false,
                modal: true,
                autoOpen: false,
                title: 'Basic Dialog',
                buttons:
                    {
                        Cancel: function ()
                        {
                            $(this).dialog('close');
                        },
                        'Create Task': function ()
                        {
                            var createSubmitFrmHandler = $(my.selectors.createFrm).live('submit', function ()
                            {
                                alert('hi');
                                return false;
                            });

                            createSubmitFrmHandler .validate();
                            var a …

我有一个应用程序,它使用一些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并在该元素上切换类.我不确定如何将它连接起来.我错过了什么？

我是一名网络开发人员.以前我是一名PHP程序员已经有好几年了,现在已经有两年了,我是一名Java开发人员.但无论服务器端使用的编程语言如何,我仍然使用JS.但不幸的是,我不能说我擅长编写JS代码.

逻辑似乎是脆弱的,分散在整个代码中,在不同的页面上.我的意思是,我在页面A上使用逻辑的一部分,然后在页面B上使用其他部分,依此类推.和JS代码变得一团糟:(

我正在尝试将通用逻辑移动到JS文件.但与此同时,我在页面A上写了一些代码,然后在页面B上,在页面C上我正在使用一些ajax回调,其中我正在调用函数,它在页面A上定义,依此类推上.

我的意思是,今天是很多新的JS框架,但我害怕使用它们,因为我害怕JS :(

那么,是否有编写JS代码的最佳实践？

UPD:伙计们,不理解我错了.对我来说问题不是要学习语言,而是要正确使用它.JS与PHP/Java有很大不同,它还意味着应该使用其他方法吗？

PS我读过JavaScript:好的部分,我知道JS的一些技巧和注意事项.但是没有足够的信息关于使用AJAX和其他东西进行客户端 - 服务器通信的最佳实践.

我有一个Ajax.BeginForm调用,它应该返回一个局部视图但是将页面重新路由到Action.关于什么是错的任何想法？

这是我要在部分视图上呈现的主页面上的代码:

    <div class="col-md-6">
        @using (Ajax.BeginForm("Search", "Home", new AjaxOptions
        {
            HttpMethod = "GET",
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "searchResults"
        }))
        {

        <div class="form-group" style="width:85%;">
            <div class="right-inner-addon">
                <i class=" glyphicon glyphicon-search"></i>
                <input type="text" data-autocomplete="@Url.Action("Quicksearch","Home")" class="form-control" placeholder="Search" name="q" />
            </div>
        </div>
        <div class="form-group">
            <button class="btn btn-default form-inline" type="submit">Search</button>
        </div>
        }
        <br />

    </div>

</div>
<div id="searchResults">

</div>

这是部分视图(由于长度而删除的项目):

    <div class="row" id="searchResults">
     ...removed form elements
       <div class="row">
            <table class="table">
    ....stuff
    </table>
    </div>
</div>

这是控制器:

   public PartialViewResult Search(string q)
    {
        var items = db.items_with_descriptions …