1

另一个关于淘汰赛的问题...

我创建了以下 ViewModel（简化）：

var SearchViewModel = function () {
    var self = this;

    //Properties
    self.resultData = ko.observableArray();
    self.selectedItem = ko.observable();

    //Methods
    self.SearchByName = function (name) {
        var url = "services/User/SearchByName/" + escape(name),
        callback = function (data) { $.each(data, function (i, e) { self.resultData.push(ko.mapping.fromJS(e)); }); self.selectedItem = self.resultData()[0]; };

    $.getJSON(url, callback);
    };

    self.UpdateSelection = function (item) {
        self.selectedItem = item;
    };
};

使用此模型，我使用以下代码将其绑定到 UI：

var vm = new SearchViewModel();

vm.SearchByName("Doe");

ko.applyBindings(vm);

结果应用于以下方面：

<div class="search-results" data-bind="foreach: resultData">
    <div class="search-result" data-bind="click: $parent.UpdateSelection">
        <input type="hidden" data-bind="value: Id"/>
        <div>
            <h4 data-bind="text: Name"></h4>
        </div>

        <div class="row-fluid">
            <div class="span6">
                <label class="font-italic">Username: </label>
                <span data-bind="text: Username"></span></div>
            <div class="span6">
                <label class="font-italic">Created: </label>
                <span data-bind="text: Created"></span>
            </div>
        </div>
    </div>
</div>

所有这些都可以正常工作，但是当单击其中一个结果时，我希望打开一个新的 jQuery UI 对话框，允许用户编辑某些字段。我尝试使用以下方法来完成此操作：

<div id="edit-user-form" title="Edit User" data-bind="with: selectedItem">
    <div class="row-fluid">
        <div class="span5">
            <label>Last Name:</label>
            <input type="text" data-bind="value: LastName" />
        </div>
        <div class="span4">
            <label>First Name:</label>
            <input type="text" data-bind="value: FirstName" />
        </div>
        <div class="span3">
        <label>Middle Name:</label>
        <input type="text" data-bind="value: MiddleName" />
    </div>
</div>

但是当我查看表单时，所有的 html 子edit-user-form项都被清除了。我读到问题可能是由 jQuery UI 对话框以及它如何移动元素引起的，但是没有打开对话框并检查 html，它仍然是空白的。

为什么会出现这种情况？我认为这可能是因为with绑定，但我认为这是它的目的。

使用淘汰赛 v2.3.0。

4

2 回答 2

1

使用模板绑定而不是使用选定项

模板绑定的例子在这里

查看模型：

viewModel.selectedArticle = ko.observable();
viewModel.templateToUse = function(item) {
return item === this.selectedArticle() ? ‘edit’ : this.selectedView();
}.bind(viewModel);

html:

<div data-bind="template: { name: templateToUse, foreach: articles }"></div>

链接：http: //jsfiddle.net/rniemeyer/Ujr4z/

希望这可以帮助你

于 2013-08-30T01:00:22.257 回答
0

您可以使用

if

和

ifnot

在两个 html 脚本之间切换的绑定...... !!!......这就是我作为模板的替代品所做的

于 2013-11-28T02:12:11.333 回答