1

在绑定到视图模型的页面中，我有一个部分，用户可以在其中向页面添加元素。元素是一个过滤器部分，由几个值字段和一个需要数据绑定到视图模型的选择元素组成。

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

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

任何人都可以提供一些关于如何在页面已经呈现后将选择元素重新绑定到视图模型的建议，或者是否有更好的方法仅使用 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'));

提前致谢，

-干杯

4

1 回答 1

2

我确实会使用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>
于 2013-05-14T18:55:38.713 回答