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>