Knockout计算属性输出函数体

时间:2013-03-13 22:33:17

标签: javascript mvvm knockout.js

我是淘汰赛的新手,我正在尝试获取计算属性的值,但我得到的只是函数体。 我的ViewModel是

    var AuthorViewModel = function (data) {
    this.id        = ko.observable(data.id);
    this.firstName = ko.observable(data.firstName);
    this.lastName  = ko.observable(data.lastName);
    this.email     = ko.observable(data.email);
    this.phone     = ko.observable(data.phone)
    this.address   = ko.observable(data.address);
    this.fullName = ko.computed(function () {
        return this.firstName() + " " + this.lastName();
    },this);
};

但是我没有得到连接的字符串


    function observable() {
    if (arguments.length > 0) {
    // Write

    // Ignore writes if the value hasn't changed
    if ((!observable['equalityComparer']) || !observable['equalityComparer'](_latestValue, arguments[0])) {
    observable.valueWillMutate();
    _latestValue = arguments[0];
    if (DEBUG) observable._latestValue = _latestValue;
    observable.valueHasMutated();
    }
    return this; // Permits chained assignments
    }
    else {.....

更新抱歉没有发布视图

<h1>Demo Application</h1>

<ul data-bind="foreach: authors">
    <li>
        <span data-bind="text: fullName()"></span>
        <a href="#" data-bind="click: edit">Edit</a>
    </li>
</ul>

<div>
    <button class="btn" data-bind="click: addAuthor">Add Author</button>
</div>

<h1>Demo Application</h1> <ul data-bind="foreach: authors"> <li> <span data-bind="text: fullName()"></span> <a href="#" data-bind="click: edit">Edit</a> </li> </ul> <div> <button class="btn" data-bind="click: addAuthor">Add Author</button> </div> 任何帮助将不胜感激

更新2 AuthorsViewModel

   var AddAuthorViewModel = function() {
        this.id = ko.observable();
        this.firstName = ko.observable();
        this.lastName = ko.observable();
        this.email = ko.observable();
        this.phone = ko.observable();
        this.address = ko.observable();
    };

    AddAuthorViewModel.prototype.template = "AddAuthor";

    AddAuthorViewModel.prototype.add = function () {
        this._requireModal();

        var newAuthor = {
            id        : this.id,
            firstName : this.firstName,
            lastName  : this.lastName,
            email     : this.email,
            phone     : this.phone,
            address   : this.address,
        };
        // Close the modal, passing the new author object as the result data.
        this.modal.close(newAuthor);
    };

AppViewModel var AddAuthorViewModel = function() { this.id = ko.observable(); this.firstName = ko.observable(); this.lastName = ko.observable(); this.email = ko.observable(); this.phone = ko.observable(); this.address = ko.observable(); }; AddAuthorViewModel.prototype.template = "AddAuthor"; AddAuthorViewModel.prototype.add = function () { this._requireModal(); var newAuthor = { id : this.id, firstName : this.firstName, lastName : this.lastName, email : this.email, phone : this.phone, address : this.address, }; // Close the modal, passing the new author object as the result data. this.modal.close(newAuthor); };

/ 我实际上正在使用http://aboutcode.net/2012/11/15/twitter-bootstrap-modals-and-knockoutjs.html中的教程,只需要一些修改

1 个答案:

答案 0 :(得分:5)

您的问题出在newAuthor创建部分:

var newAuthor = {
    id        : this.id,
    firstName : this.firstName,
    lastName  : this.lastName,
    email     : this.email,
    phone     : this.phone,
    address   : this.address,
 };

因为使用此代码,您创建的对象引用了observable本身而不是它们的值。

因此,在AuthorViewModel的最后,data对象将具有可观察的属性,您可以将其再次包装到一组新的可观察属性中......

因此,您需要在创建newAuthor时展开您的observable:

var newAuthor = {
    id        : this.id(),
    firstName : this.firstName(),
    lastName  : this.lastName(),
    email     : this.email(),
    phone     : this.phone(),
    address   : this.address(),
};