2

ユーザーが保存することを選択したプロファイルごとに1つずつ、いくつかのタブを作成しようとしています。各プロファイルはViewModelです。そのため、{name：profile_name、model：model_converted_to_json}タイプのオブジェクトのobservableArrayを含む別のViewModelを作成するだけだと思いました。

この例に従ってコードを作成しましたが、何らかの理由で何もバインドされません。

これが私のコードです：
-ViewModel（私はRequirejsを使用しています。これは外部ラッパーを説明しています）：

"use strict";
// profiles viewmodel class
define(["knockout"], function(ko) {
    return function() {
        var self = this;
        this.profilesArray = ko.observableArray();
        this.selected = ko.observable();
        this.addProfile = function(profile) {
            var found = -1;
            for(var i = 0; i < self.profilesArray().length; i++) {
                if(self.profilesArray()[i].name == profile.name) {
                    self.profilesArray()[i].model = profile.model; 
                    found = i;
                }
            }
            if(found == -1) {
                self.profilesArray().push(profile);
            }
        };
    };
});

-JSコード（大きなファイルの抜粋）：

var profiles = new profilesViewMode();
ko.applyBindings(profiles, $("#profileTabs")[0]); 
$("#keepProfile").on("click", function() {
    var profile = {
        name: $("#firstName").text(),
        model: ko.toJSON(model)
    };
    profiles.addProfile(profile);
    profiles.selected(profile);
    console.log(profile);
    $("#profileTabs").show();
});

-HTML（HTMLマークアップを修正してくれたSaraに感謝します）

<section id="profileTabs">
    <div>
        <ul class="nav nav-tabs" data-bind="foreach: profilesArray">
            <li data-bind="css: { active: $root.selected() === $data }">
                <a href="#" data-bind="{ text: name, click: $root.selected }"></a>
            </li>
        </ul>
    </div>
</section>

ボタンをクリックすると、observableArrayが新しい正しい値を取得することを確認しました。レンダリングされないだけです。Knockoutデータバインド構文に欠けているのは小さなことだと思います。

御時間ありがとうございます！

4

2 に答える 2

5

observableArrayを直接呼び出す必要がpushあります。これにより、基になる配列にプッシュされ、サブスクライバーに通知されます。それで：

self.profilesArray.push(profile);
于 2012-11-07T20:32:33.787 に答える
3

name: $('#firstName').text();を使用して名前を設定しています。.val()これが入力フィールド（ここで想定した）を参照している場合は、これをに変更する必要があるかもしれません。

.push()koのサブスクライバー（この場合はバインディング）をバイパスする基になる配列で使用しています

これがあなたのコードに基づいた動作中のjsfiddleです。modelそれが含まれていなかったので、私はいくつかの自由を取りました。

于 2012-11-07T20:43:06.810 に答える