小编Cra*_*uce的帖子

有没有人知道使用Knockout JS模板创建自动完成组合框的最佳方法？

我有以下模板:

<script type="text/html" id="row-template">
<tr>
...
    <td>         
        <select class="list" data-bind="options: SomeViewModelArray, 
                                        value: SelectedItem">
        </select>
    </td>
...        
<tr>
</script>

有时这个列表很长,我想让Knockout很好地使用jQuery自动完成或一些直接的JavaScript代码,但收效甚微.

另外,jQuery.Autocomplete需要输入字段.有任何想法吗？

我正在使用Knockout JS,因为业务需求要求大多数(如果不是全部)逻辑由于低带宽用户而在浏览器中处理.到目前为止,除了一个问题外,它的功能还很棒.

我使用了许多包含级联逻辑的多选下拉列表.我有8个列表处理分层数据并更改子列表中的可选选项.

这一切都很好,直到我到达底部的2个列表,这些列表可能包含3000个项目,具体取决于父列表选择(特别是当单击"全选"时).

问题是,在IE中,我得到了很长时间运行脚本警告消息,我需要摆脱它.这是一些代码:

viewModel.BottomLevelList= ko.dependentObservable(function () {
        if (this.ParentList().length === 0) { //nothing selected
            return [];
        }          
        var result = [];
        var i = self.longMasterList.length;
        var currentId = 0;
        while (i--) {
           //psuodo code:
           //this.ParentList().Contains(loop-item) then
               //put in return list based on some further logic
           //else continue
        }

        return result;


    }, viewModel);

我尝试使用SO中的各种setTimeout技术来打破大型阵列并将控制暂时返回到浏览器,但没有成功.结果永远不会返回和/或observable似乎分离自己在UI中留下一个空列表.

如果我需要使用AJAX,我会,但这是最后的手段,并希望将其保留在客户端.

所以我的问题归结为:

• 如何处理大型数据集(在Knockout JS依赖的observables和级联列表的上下文中),我如何停止长时间运行的脚本警告
• 在这种情况下,我是否可以/应该使用一些惯用的JavaScript技术
• 我在这里看不到树木了吗？!

非常感谢您的帮助

我有一个表,通过Knockout js数据绑定.在每一行上都是一个链接,我希望显示一个模态对话框,其中包含也将与我的视图模型绑定的输入字段.

这是我的服务器端视图模型

public class ViewModel
{
    ...//String getters/setters
     public IList<SubViewModel> SubViewModels{get;set;} // contains a couple of String properties
     ...
}

然后,我在客户端中成功地序列化它并绑定到表.每个表行都有一个链接:

<script type="text/html" id="myRowTemplate">
    <tr>
    <td><a href="#" data-bind="click: function(){ myModel.doStuffInADialog($data) }">Do stuff in a popup</a></td>
... other editable text fields, all playing nicely

正确调用此函数,但我想将当前选定的行数据传递给模板:

var viewModel = {
    ...
    doStuffInADialog: function (selectedRowData) {
        //how to pass this selectedRowData to the template?
        d.dialog({ ... jquery dialog stuff });
        ...

这是我想要使用的模板:

<script type="text/html" id="nestedPropertyTemplate">
    <div class="form-row">
        <div>
            <label>${someFieldOnNestedProperty}</label>
        </div>
        <div class="field"> …