Knockback.js: Как я могу сделать обновление представления, когда сохранение основы обновляет модель?

Question

Я впервые работаю с Knockback.js.

Я работаю над подтверждением концепции Knockback, но мне сложно обновить модель представления при сохранении модели. В этом случае, что происходит, сервер возвращает новый Domain объект с id набор полей, что означает, что объект теперь существует на бэкэнде. Как только это произойдет, я хотел бы изменить пользовательский интерфейс, чтобы отразить тот факт, что он теперь сохранен.

Вот код, который я использую:

<table cellspacing="0" class="listing-table" id="domainListTable">
    <thead>
        <tr>
            <th scope="col">
                Domain
            </th>
        </tr>
    </thead>
    <tbody data-bind="foreach: domains">
        <tr>
            <td>
                <!-- ko if:save -->
                    <a data-bind="attr: { href: domainEditLinkdomainId, title: domain},text : domain">
                        <span data-bind="text: domain"></span>
                    </a>
                <!-- /ko -->
                <!-- ko ifnot:save -->
                    <input type="text" maxlength="250" style="display:inline-block;" class="medium-text-field" data-bind="value: domain"></input>
                    <input data-bind="click: save" style="display:inline-block;"  type="submit" value="Save New Domain" alt="" title=""/>
                <!-- /ko -->
            </td>
        </tr>
    </tbody>
</table>
<br />
<input data-bind="click: addDomain" type="submit" value="Add New Domain" alt="" title=""/>

<script type="text/javascript">
    var Domain = Backbone.Model.extend({
        defaults: function() {
          return {
            domain: "New Domain"
          };
        },
    });

    var Domains = {};

    Domains.Collection = Backbone.Collection.extend({
        model: Domain,
        url: '/cms/rest/poc/${customerId}/domains/'
    });

    var domains = new Domains.Collection();
    domains.fetch();

    var DomainViewModel = kb.ViewModel.extend({
        constructor: function(model) {
            kb.ViewModel.prototype.constructor.apply(this, arguments);

            var self = this;

            this.save = kb.observable(model, {
              key: 'save',
              read: (function() {
                return !model.isNew();
              }),
              write: (function(completed) {
                return model.save({}, {
                    wait: true,
                    success: function (model, response) {
                        console.log(model);
                        console.log(response);
                        console.log(self);
                    },
                    error: function(model, response) {
                        alert("Oh NooooOOOes you broked it!!!11!")
                    }
                });
              })
            }, this);

            this.domainEditLinkdomainId = ko.dependentObservable(function() { 
                if(!this.save())
                    return "";

                return "cms?action=domainDetail&domainID=" + this.model().id;
            }, this);
         }
    });

    var DomainsViewModel = function(collection) {
        this.domains = kb.collectionObservable(collection, { view_model: DomainViewModel });
        this.addDomain = function() {
            this.domains.push(new DomainViewModel(new Domain()));
        };
    };

    var domainsViewModel = new DomainsViewModel(domains);

    ko.applyBindings(domainsViewModel);
</script>

Проблема в том, что XMLHttpRequest сделано model.save() не возвращается, пока после сохранения kb.observable читается, и поэтому HTML-часть не обновляется успешно, так как он все еще видит model.isNew() как правда.

Как вы, наверное, видите, я возился с парой разных идей, в том числе с использованием valueHasMutated метод на наблюдаемой, чтобы указать, что модель была обновлена, но я также не могу понять, как это сделать.

Любая помощь будет принята с благодарностью!

Answer 1

Вы могли бы слушать change:id событие на модели.

Это сработает только тогда, когда состояние модели изменится с нового на постоянное.