javascript - Marionette属性未定义，从API获取

Question

我正在学习 Marionette Gentle 简介，遇到了 Single Contact API 部分的一些问题。

好吧，我们进入正题吧。

这是我的模板

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

这是我的 Controller 的一部分

   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 获取属性而不是属性

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

提前致谢

Answer 1

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

我建议您阅读更多有关 Deferred object 的内容。反对更深入地了解它。

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

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

然后在您的 Controller 文件中使用完成回调包装渲染部分:

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 block 永远不会执行。 您的 if 语句不正确。您的模型不能未定义。它可以引发错误并停止代码的执行，但不能是未定义。如果出现错误，您可以将 fail 回调附加到您的 Promise 中并处理该情况。

如果您显示联系人并确保后端存在 id，只需删除 if 语句并使用 else 添加 fail 回调 情况下，请务必对后端 API 进行更改，以便在 id 不存在时响应 404 Not found。