Question

我是新的蜜蜂尝试使用主干和下划线的婴儿步骤，坚持这个错误

未捕获的ReferenceError：未定义数据。

请告诉我这是什么问题。

这是我的html，它有所有的js和模板

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>To-do App in Backbone.js</title>
</head>
<body>
<!-- ========= -->
<!-- Your HTML -->
<!-- ========= -->

<div  id="page">
    <div id="content"/>
</div>


<!-- ========= -->
<!-- Libraries -->
<!-- ========= -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>


<script type="text/template" id="template1">
    <div>

        My modal value =<%= data  %>

    </div>
</script>

<!-- =============== -->
<!-- Javascript code -->
<!-- =============== -->
<script type="text/javascript">

    var HomeModel=Backbone.Model.extend({
                data :'some dummy value loaded from server'
    });

    var HomeView=Backbone.View.extend({
             render:function(){
                 var template = _.template($('#template1').html());
                 $('#content').html(template(new  HomeModel().toJSON()));
             }
     });

    var HomeViewIns= new HomeView();
    HomeViewIns.render();
</script>

</body>
</html>

Answer 1

当您说_.template($('#template1').html())时，_.template会将模板文本转换为JavaScript函数，如果您使用其source属性查看该函数的源代码，您会看到类似这样的内容（略微清理）：

function(obj){
    //...
    with(obj||{}){
        __p += ... ((__t=( data  )) ...
    }
    return __p;
}

并且data引用了导致错误的内容。模板函数使用with来使JavaScript查找变量（例如data）作为您传递给模板函数的obj对象的属性。

您的ReferenceError告诉您data中没有new HomeModel().toJSON()个属性。为什么不在那里？它不存在，因为当您对它们调用toJSON并且属性与属性不同时，Backbone模型会返回属性。您要将HomeModel定义为data 属性：

var HomeModel=Backbone.Model.extend({
    data :'some dummy value loaded from server'
});

但没有属性。这意味着toJSON将为您提供一个空对象（即{}），并且空对象中没有data。

如果您希望自己的模型具有data 属性，请尝试向其中添加defaults：

var HomeModel = Backbone.Model.extend({
    defaults: {
        data: 'some dummy value loaded from server'
    }
});

演示：http://jsfiddle.net/ambiguous/PQN63/

Answer 2

问题是data不被视为模型的属性，而是模型实例的属性。

为属性定义默认值时，必须使用Backbone模型中的defaults属性：

defaults : {
    attributeName : defaultValue
}

当你实例化一个模型时，Backbone将把你在构造函数中传递的对象作为参数和defaults对象中的对象来构建模型的属性。

选中JSFiddle。

模板中引用的错误模型未定义

2 个答案: