2

複雑なオブジェクトの監視可能な配列があります。初期ロードは問題なく、期待されるすべてのデータは問題ないように見えます。現在、その配列に新しいアイテムを POST する作業を行っています。注: 監視可能な配列は、ASP.NET ajax Web API 呼び出しを介して読み込まれています。

新しいアイテムの投稿は、データベースに保存する限りは正常に機能しますが、DOM が新しいアイテムで更新されず、何が欠けているのかわかりません。

これがViewModel全体です

    function ClientList() {
    //data
    var self = this;
    self.initialized = ko.observable(false);
    self.clients = ko.observableArray();
    self.userId = ko.observable("");
    self.name = ko.observable("");
    self.logo = ko.observable("");
    self.projects = ko.observableArray();
    self.clientAddress = ko.observableArray();


    self.addClient = function () {
        var client = {
            UserId: self.userId,
            Name: self.name,
            Logo: self.logo,
        }
        client = ko.toJSON(client);
        lucidServer.addClient(client);
        self.clients.push(client);
    }.bind(self);

    (function () {
        $.ajax({
            url: lucidServer.getClients(1),
            success: function (data) {
                ko.mapping.fromJS(data, {}, self.clients);
                self.initialized(true);
            }
        });
    })();
};

function IncompleteStoriesList() {
    //data
    var self = this;
    self.initialized = ko.observable(false);
    self.stories = ko.observableArray();
    (function () {
        $.ajax({
            url: lucidServer.getIncompleteStory(1),
            success: function (data) {
                ko.mapping.fromJS(data, {}, self.stories);
                self.initialized(true);
            }
        });
    })();
};


function ViewModel() {
    var self = this;
    self.clientList = new ClientList();
    self.storyList = new IncompleteStoriesList();
}

ko.applyBindings(new ViewModel());

これは、POST を実行している特定のスニペットです (ClientList() 関数内)。

self.addClient = function () {
        self.client = {
        UserId: self.userId(),
        Name: self.name(),
        Logo: self.logo(),
        }
    //make client object to send to server
    var client = ko.toJSON(self.client);
    lucidServer.addClient(client);
    //push the self.client to the observablearray of clients
    self.clients.push(self.client);
}.bind(self);

クライアント変数内にあるのは JSON であることを確認しましたが、エラー メッセージがスローされていないため、混乱しています。アイテムを追加してページ全体を更新すると、リストに表示されます。

編集：関連するhtmlは次のとおりです。

<form data-bind="submit: clientList.addClient">
    <div>
        <label>userId</label>
        <input type="text" data-bind="value: clientList.userId" />
    </div>
    <div>
        <label>name</label>
        <input type="text" data-bind="value: clientList.name" />
    </div>
    <div>
        <label>logo</label>
        <input type="text" data-bind="value: clientList.logo" />
    </div>
    <button type="submit">Add</button>

    </form>

    <!-- ko ifnot: clientList.initialized -->
    <span>Loading...</span>
    <!-- /ko -->
    <ul data-bind="template:{name: 'clientList', foreach:clientList.clients}">
    </ul>

外部テンプレートは次のようになります。

<div id="clientListOutput">

    <li><span data-bind="text: name"></span>
        <div data-bind="template: {foreach: clientAddress}">
            <span data-bind="text: city"></span>
            <span data-bind="text: state"></span>
        </div>
        <hr />
        <ul data-bind="template: {foreach: projects}">
            <li>
                <span data-bind="text: name"></span>
                <span data-bind="text: summary"></span>
                <span data-bind="text: description"></span>
            </li>
        </ul>
    </li>
4

1 に答える 1

1

あなたの HTML にタイプミスがあることは間違いありません。ko.observablearray を使用した実際の例を次に示します。

HTML:

<form data-bind="submit: addItem">
    prop1: <input data-bind='value: prop1, valueUpdate: "afterkeydown"' />
    prop2: <input data-bind='value: prop2, valueUpdate: "afterkeydown"' />
    <button type="submit">Add</button>
    <p>Your items:</p>
    <div data-bind="foreach: items">
        <span data-bind="text: prop1"></span> &nbsp - &nbsp
        <span data-bind="text: prop2"></span>
        <br />
    </div>
</form>

JS:

var SimpleListModel = function() {
    this.items = ko.observableArray();
    this.prop1 = ko.observable("");
    this.prop2 = ko.observable("");
    this.addItem = function() {
        this.items.push({prop1:this.prop1, prop2: this.prop2});
    }.bind(this);  // Ensure that "this" is always this view model
};

ko.applyBindings(new SimpleListModel());

http://jsfiddle.net/NjSBg/2/

バインディングを適用するのを忘れた可能性もあると思います...

編集

間違ったフィドルを投稿したことをお詫びします。

self.addClient = function () {
    var client = {
        UserId: self.userId(),
        Name: self.name(),
        Logo: self.logo()
    }
    lucidServer.addClient(ko.toJSON(client));
    self.clients.push(client);
}.bind(self);

括弧を追加して、オブザーバブルの現在の静的値を取得します

于 2012-10-31T04:09:31.527 に答える