Question

我正在使用backbone.js，我想将搜索字段选项限制为只有一列，而不是全部。我发现搜索字段旁边的下拉列表位于函数“_.extend（bbGrid.SearchView.prototype，Backbone.View.prototype”<）的/assets/js/app/bbGrid.js处。 / p>

具体来说，我试图在上面的函数中编辑以下模板代码：

                    <ul class="dropdown-menu pull-right">\
                    <% _.each(cols, function (col, index) {%>\
                        <li <% if (index === searchOptionIndex) { %>class="active"<% } %>>\
                            <a name="<%=index%>" href="#"><%=col.title%></a>\
                        </li>\
                    <%})%>\
                </ul>\

我没有创建所有列的多个下拉列表，而是想删除迭代，只创建一个'“href =”＃“＆gt;＆lt;％cols [0] .title％＆gt; \'，而不是所有列的多个列表。

我完全没有使用javascript，我无法找到打印特定值的方法（就像在python或java中一样），以找出“cols”的结构，或“上述代码迭代”的“函数” col“和”index“分配多个搜索值。

对于如何消除迭代并仅分配一个值，或者如何理解“cols”和“function”的数据类型，我将不胜感激。我的意思是他们是dicts / lists还是其他什么？如果我知道我可以更具体地谷歌。

提前感谢您提供任何帮助/建议：）

Answer 1

首先，我假设cols是一个对象数组。

所以当你执行_.each(cols, function (col, index) {...})时，你正在迭代这个数组，并且对于其中的每个元素，你将执行回调function (col, index) {...}（函数不是一个变量，就像一个java方法）传递给它当前元素col及其在数组中的位置（0,1,2 ... cols.length）。

如果您想访问第一个元素，可以执行cols[0].title

Answer 2

让我解释一下代码中会发生什么。

Underscore template method返回一个允许您实例化该模板的函数。模板的HTML是该方法的第一个参数。可以在标记<%和%>之间添加逻辑。

template: _.template(
    '<div class="input-append">\
       <input name="search" class="span2" type="text" placeholder="<%=dict.search%>">\
       <div class="btn-group dropup">\
           <button class="btn dropdown-toggle" data-toggle="dropdown">\
           <span name="column"><%=cols[0].title%></span>\
           <span class="caret"></span>\
           </button>\
           <ul class="dropdown-menu pull-right">\
               <% _.each(cols, function (col, index) {%>\
                   <li <% if (index === searchOptionIndex) { %>class="active"<% } %>>\
                       <a name="<%=index%>" href="#"><%=col.title%></a>\
                   </li>\
               <%})%>\
           </ul>\
       </div>\
   </div>', null, templateSettings
),

现在出现了实例化模板的部分。您将3个模型传递给函数：dict，searchOptionIndex和cols。然后，该数据将在模板中提供。

如果您想知道cols的确切内容，您应该在此行设置断点并检查对象的内容。查看有关如何调试javascript的浏览器文档。

searchBarHtml = this.template({
   dict: this.view.dict,
   searchOptionIndex: this.searchOptionIndex,
   cols: searchColList
});

当你查看模板的HTML时，你会在这里找到它们。 Underscore each method循环遍历作为第一个参数传递的数组中的所有元素。所以我们可以假设cols是一个数组。然后执行作为数组中每个元素的第二个参数传递的函数。

<% _.each(cols, function (col, index) {%>\
    <li <% if (index === searchOptionIndex) { %>class="active"<% } %>>\
        <a name="<%=index%>" href="#"><%=col.title%></a>\
    </li>\
<%})%>\

我希望这能为你解决一些问题。如果您有任何具体问题，请与我们联系。

Answer 3

好吧我发现index只是function的总对象上的一个数字（而不是数组内的对象）迭代，我在上面提到的_extend函数的理想片段是：< / p>

<ul class="dropdown-menu pull-right">\ <li>\ <a name="<%=0%>" href="#"><%=cols[0].title%></a>\ <a name="<%=1%>" href="#"><%=cols[1].title%></a>\ </li>\ </ul>\

Backbone.js - 搜索字段：仅使用一个项目

3 个答案: