木偶属性未定义，从API获取答案

【问题标题】：Marionette attributes is not defined, get from API木偶属性未定义，从API获取
【发布时间】：2014-12-27 16:47:50
【问题描述】：

我正在学习 Marionette Gentle Introduction，面临 Single Contact API 部分的一些问题。

好的，让我们直奔主题。

这是我的模板

        <script type="text/template" id="contact-view">
            <%= id %>
            <h1><%= firstName %> <%= lastName %></h1>
            <p><strong>Phone number:</strong> <%= phoneNumber %></p>
        </script>

这是我的控制器的一部分

   showContact: function(id){
        var contact = ContactManager.request('contact:model', id);
        var contactView;
        if(contact !== undefined)
        {
            contactView = new Show.Contact({
                model: contact
            });
        }
        else
        {
            contactView = new Show.MissingContact();
        }

        ContactManager.mainRegion.show(contactView);
    }

这是我模型的一部分

Entities.Contact = Backbone.Model.extend({
    urlRoot: "php/contacts/index.php",
    defaults: {
        firstName: '',
        lastName: '',
        phoneNumber: ''
    }
});

var API = {
    getContactEntity: function(contactId){
        var contact = new Entities.Contact({id:contactId});
        contact.fetch();

        return contact;
    }
};

ContactManager.reqres.setHandler("contact:model", function(id){
    return API.getContactEntity(id);
});

这是我的 php API

$data[] = array('id'=>1, 'firstName'=>'Alice', 'lastName'=>'Arten', 'phoneNumber'=>'555-0184');
$data[] = array('id'=>2, 'firstName'=>'Bob', 'lastName'=>'Brigham', 'phoneNumber'=>'555-0184');
$data[] = array('id'=>3, 'firstName'=>'Charlie', 'lastName'=>'Campbell', 'phoneNumber'=>'555-0184');
echo json_encode($data[1]);

我尽量保持简单。所以当我删除默认值时，错误如下

firstName is not defined

我尝试控制台登录模型中的联系人，请参考此http://prntscr.com/51k7ec

我很确定它是从 previousAttributes 获取属性而不是属性

请帮帮我。我做错什么了吗？

提前致谢

【问题讨论】：

能否附上reqres.setHandler("contact:model" ...)的代码
已经附在模型部分。谢谢
我明白了，fetch 是异步的，你喜欢等到它完成
对不起，我不明白你的意思。
你能显示视图的代码吗？

标签： javascript backbone.js underscore.js marionette

【解决方案1】：

Backbone.Model 的fetch 方法返回jqXHR 对象。 fetch 方法默认是异步的，因此您需要将回调附加到从它返回的promise，然后在该回调中您将可以访问实际获取的模型。

我建议你阅读更多关于 Deferred object 对象的内容以更深入地了解它。

对于您的问题，我建议您将 promise 对象附加到您的模型：

var API = {
    getContactEntity: function(contactId){
        var contact = new Entities.Contact({id:contactId});
        contact.promise = contact.fetch();
        return contact;
    }
};

然后在你的控制器文件中用 done 回调包装渲染部分：

showContact: function(id){
    var contact = ContactManager.request('contact:model', id);
    var contactView;
    contact.promise.done(function (){
    if(contact !== undefined)
    {
        contactView = new Show.Contact({
            model: contact
        });
    }
    else
    {
        contactView = new Show.MissingContact();
    }

    ContactManager.mainRegion.show(contactView);

    });
}

在这种情况下，您的代码的某些部分将起作用。为什么是一部分？因为else 块永远不会执行。您的 if 声明不正确。您的模型不能是 undefined。它可以引发错误并停止执行您的代码，但它不能是undefined。如果出现错误，您可以将 fail 回调附加到您的承诺并处理这种情况。

如果您显示联系人并确定您的后端中存在id，只需删除if 语句并添加fail 回调与else 案例，请务必在后端API 中进行更改以使用404 Not found 进行响应当 id 不存在时。

【讨论】：