Question

在我的页面中绑定到viewmodel我有一个用户可以向页面添加元素的部分元素是一个过滤器部分，由一些值字段和一个需要数据绑定到viewmodel的select元素组成。

在html中运行内联的select选项可以正常工作。但是，一旦我将其拉出并将其添加到添加过滤器控件的jquery，它就无法绑定。我意识到这部分是由于视图模型已被绑定，我试图再次调用apply绑定，但这也失败了。

我不能像其他地区一样使用foreach，因为这部分是可选的。用户不必添加过滤器，如果他们不想这就是我去jquery路线的原因。

任何人都可以提供一些关于如何在页面已经渲染后将select元素重新绑定到视图模型的建议，或者是否有更好的方法只使用Knockout来完成此任务？

代码： HTML

  <div id="filterSection" data-bind="with: ReportObject">
                <select data-bind="options: SelectedAttributes(), optionsText: function(SelectedAttributes){ return SelectedAttributes.NameHierarchy() + '.' + SelectedAttributes.LabelName() },  optionsCaption:'Select a Field...'">
                </select><!-- the select here works I added this for testing -->
                <div id="filterBuilder">
                    <input type="button" value="Add A Filter" title="Add A Filter" class="special" id="add" /> 
                </div>
            </div>

的jQuery

function CreateFilterRow() {
        $("<div class='filterrow'><select class='queryterm' name='condition'><option  value='AND'>AND</option><option value='OR'>OR</option></select>" +
    "<select data-bind='options: SelectedAttributes(), optionsCaption:'Select a Field...'></select>&nbsp;&nbsp;<select name='operator'class='operClass'><option value='EQUALS' id='opt1'>Equals</option><option id='opt1' value='CONTAINS'>Contains</option><option id='opt2' value='DOES NOT CONTAIN'>Does Not Contain</option><option id='opt3' value='LIKE'>Like</option><option id='opt4' value='BETWEEN'>Between</option></select>&nbsp;&nbsp;<input type='text' class='queryterm' name='fieldValue1' id='fieldvalue1' value='' size='25' />&nbsp;&nbsp;<a id='btnRemove' class='ui-button-text-only'>Remove</a><a id='btnadd' class='ui-button-text-only'>Add</a></div>").appendTo('#filterBuilder');
    };

    //orignal add row button
    $(document.body).on('click', '#add', function (event) {
        CreateFilterRow();
        ko.applyBindings(ReportWriterViewModel);
    });

这里的jquery块只是在DOM中插入字段和事件点击。应用绑定在行的后面进一步调用。我省略了KO代码，因为它适用于其他地方所以我知道问题不在Vm中，而是在VM初始化后注入这些元素。

我还试图使用applyBindings并使用dom元素名称而没有运气

 ko.applyBindings(ReportWriterViewModel , document.getElementById('filterSection'));

提前致谢，

-cheers

Answer 1

我确实会使用foreach绑定。毕竟，如果用户还没有点击“添加”，则可观察数组可以没有条目。 Knockout旨在处理这种动态UI。

在您的视图模型上使用类似的内容：

ReportObject.filterRows = ko.observableArray();
ReportObject.addFilterRow = function () {
    ReportObject.filterRows.push({});
};
ReportObject.removeFilterRow = function (filterRow) {
    ReportObject.filterRows.remove(filterRow);
}

HTML中的类似内容：

<div id="filterSection" data-bind="with: ReportObject">
    <div data-bind="foreach: filterRows">
        <div class="filterrow">
            <!-- put the selects and inputs here -->
            <a data-bind="click: $parent.removeFilterRow" class='ui-button-text-only'>Remove</a>
        </div>
    </div>
    <div id="filterBuilder">
        <input data-bind="click: addFilterRow" type="button" value="Add A Filter" title="Add A Filter" class="special" /> 
    </div>
</div>

如何将knockout js viewmodel数据绑定到jquery动态创建的行

1 个答案: