敲除计算属性输出函数体答案

【问题标题】：Knockout computed property outputs function body敲除计算属性输出函数体
【发布时间】：2013-03-02 03:00:39
【问题描述】：

我是淘汰赛的新手，我正在尝试获取计算属性的值，但我得到的只是函数体。我的 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);
};

但是我得到的不是串联的字符串

函数可观察（）{ if (arguments.length > 0) { // 写 // 如果值没有改变，则忽略写入 if ((!observable['equalityComparer']) || !observable['equalityComparer'](_latestValue, arguments[0])) { observable.valueWillMutate(); _latestValue = 参数[0]; if (DEBUG) observable._latestValue = _latestValue; observable.valueHasMutated(); } 返回这个； // 允许链式赋值 } 别的 {.....

更新抱歉没有发布视图

<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 /

 The root view model for the application
    var AppViewModel = function() {
        this.authors = ko.observableArray();
    };

    AppViewModel.prototype.addAuthor = function() {
        showModal({
            viewModel: new AddAuthorViewModel(),
            context: this // Set context so we don't need to bind the callback function
        }).then(this._addAuthorToAuthors);
    };

    AppViewModel.prototype._addAuthorToAuthors = function (newAuthorData) {
        this.authors.push(new AuthorViewModel(newAuthorData));
    };

我实际上是在使用来自http://aboutcode.net/2012/11/15/twitter-bootstrap-modals-and-knockoutjs.html 的教程，只做了一些修改

【问题讨论】：

你如何尝试获取价值？
但是如果我在返回之前使用控制台日志，我会得到相同的输出。
您也可以发布您如何填写authors 数组吗？难道你的data.firstName 和data.lastName 已经是 ko.observable 了吗？因为只有在这种情况下，你的代码才能产生你的输出......
我认为你说得有道理，我想我早就注意到了同样的想法，但不幸的是我也是 javascript 的新手，但我不明白为什么其他属性有效

标签： javascript mvvm knockout.js

【解决方案1】：

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

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

因为使用此代码，您正在创建一个引用可观察对象本身而不是它们的值的对象。

因此，在您的AuthorViewModel 的最后，data 对象将具有可观察的属性，您可以将它们再次包装成一组新的可观察属性...

因此，您需要在创建 newAuthor 时打开您的 observables：

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

【讨论】：