jquery - 使用 Knockout 和 jQuery 显示/隐藏模板元素

Question

我有这个：

<div data-bind="with: storeModel.stores()">
    <h1>Store count <span data-bind="text: '(' + $data.length + ')'"></span></h1>
    <ul id="stores" data-bind="foreach: $data">
        <li data-bind="text: Name, click: $root.storeModel.editStore"></li>
    </ul>
</div>

    <div id="editStore" data-bind="with: storeModel.currentEditItem()">
        <form data-bind="submit: $root.storeModel.saveStore" action="">
            <fieldset>
                <legend>Foo</legend>
                <label for="name">Name:</label>
                <input type="text" data-bind="value:Name" id="name" />
                <label for="address">Address:</label>
                <input type="text" data-bind="value:StreetAddress" id="address" />
                <label for="postalcode">Postal code:</label>
                <input type="text" data-bind="value:PostalCode" id="postalcode" />
                <label for="city">City:</label>
                <input type="text" data-bind="value:City" id="city" />
                <button style="display:block" type="submit" data-bind="jqButton: $data">Save</button>
            </fieldset>
        </form>
    </div>

p.editStore = function(store, event) {
            location.hash = 'Stores/Edit/' + ko.utils.unwrapObservable(store.StoreId);
            p.currentEditItem(store);

            //Append edit form to li, how?
        }

现在，我希望每个 li 元素上的单击事件将编辑表单附加到所述 li 上。在这里保持编辑表单的模板是个好主意吗？否则，我的意思是，需要为每个 li 生成编辑表单。

还是应该使用绑定处理程序？

主要来自 jQuery，在 KO 中处理 UI 内容可能会非常混乱。感谢所有答案。

Answer 1

您可以使用If 语句。它会动态地将表单添加到您的 li 标签中，而不是一直将其存储在那里。

 <li data-bind="text:$data, if: $data == selected ">

这是一个简短的例子

Answer 2

您能否发布其余的淘汰赛，以便我们可以看到您正在使用的数据模型？

以下是我将如何处理这种情况。您基本上将模板绑定到“当前值”。您只需轮流显示/隐藏表单，但始终传递单击的内容。您的点击处理程序会将点击的项目设置为模板显示的内容，在我的情况下，我只显示对话框。示例（大部分代码，但希望您能得到一个想法）

<script type="text/x-jquery-tmpl" id="streamTemplate">
    <fieldset>
        <legend>Information</legend>
        <table style="width:100%">
            <tr>
                <td>
                    <label>Account: <span data-bind="text:AccountName"></span></label>
                </td>
                <td>
                    <label>MAC Address: <span data-bind="text:MAC"></span></label>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Camera Model: <span data-bind="text:CameraModelName"></span></label>
                </td>
                <td>
                    <label>Channel: <span data-bind="text:Stream"></span></label>
                </td>
            <tr>
        </table>
    </fieldset>
</script>

<div id="dialog" data-bind="template: { name: 'streamTemplate', data: CurrentActivation()}">
</div>



<tbody data-bind="foreach: ActivationCodes">
        <tr>
            <td>
                <label data-bind="text: MAC()">
                </label>
            </td>
            <td>
                <label data-bind="text: AccountName()">
                </label>
            </td>
            <td>
                <button data-bind="click: $root.Activate">
                    Activate</button>
            </td>
        </tr>
<tbody>

<script>    
     function viewModel() {
        var self = this;

        self.filter = ko.observable("All");

        self.ActivationCode = ko.observable();

        self.ActivationCodes = ko.observableArray([]);

        self.CurrentActivation = ko.observable(new InactiveCamera("", "", "", "", "", "", "", "", ""));

        self.Activate = function (data) {
            self.CurrentActivation(data);
            $("#dialog").dialog("option", "title", "Activing Streams for: " + data.ActivationCode());
            $("#dialog").dialog("open");
            $("#dialog button").button();
        };
    }

    function format(date) {
        return date.getMonth() + "/" + date.getDay() + "/" + date.getFullYear() + " " + date.toLocaleTimeString();
    }

    $("#dialog").dialog({
        autoOpen: false,
        width: 600,
        height: 600,
        modal: true

    });

    ko.applyBindings(new viewModel());
</script>