Javascript 将模型对象传递到主干中的视图_Javascript_Backbone.js

Javascript 将模型对象传递到主干中的视图

javascript backbone.js

Javascript 将模型对象传递到主干中的视图,javascript,backbone.js,Javascript,Backbone.js,我一直试图在模板中传递一个要计算的模型对象，但没有成功。我尝试了以下方法，但没有成功 dashboardmodel.js var myMod = Backbone.Model.extend({ defaults: { name: "mo", age: "10" } }); myview.js var dashView = Backbone.View.extend({ el: '.content-area',

我一直试图在模板中传递一个要计算的模型对象，但没有成功。我尝试了以下方法，但没有成功

dashboardmodel.js

var myMod = Backbone.Model.extend({
   defaults: {
     name: "mo",
     age: "10"
   }
});

myview.js

         var dashView = Backbone.View.extend({

         el: '.content-area',

         this.mymodel = new myMod({}), 

         template: _.template(dashBoardTemplate, this.mymodel),
         initialize: function() {
                    },

                    render: function() {
                        this.$el.html(this.template);
                        return this;
                    }

// more javascript code.............

dahboard.html

<p> Hello <%= name %> </p>

你好

PS：我正在使用下划线模板引擎

您需要使用getter语法获取主干模型的属性，因此您需要将模板重写为：

<p> Hello <%= obj.get('name') %> </p>

旁注：您应该考虑将模板呈现逻辑移动到视图中。因为当前代码在声明视图时呈现模板，而不是在调用

render

方法时呈现模板。所以你可能会得到意想不到的结果。您的代码如下所示：

template: _.template(dashBoardTemplate), //only compile the template
render: function() {
    this.$el.html(this.template(this.mymodel.toJSON()));
    return this;
}

此外，将模型传递给视图的方式不灵活，因为您将传递模型的实例，而不是默认模型。因此，您可能需要单独列出

this.mymodel = new myMod({}),

（顺便说一句，由于“=”符号，上面的行在我的chrome浏览器中给我错误消息）

然后，假设您有一个实例A：

A = new myMod({"name": "World", "age":100})

然后将其作为以下内容传递到视图：

myview = new dashView({mymodel: A})

您必须执行的另一个步骤是调用render函数：

myview.render();

这里有一个完整的解决方案：

<html>
<script src="jquery-1.10.2.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone.js"></script>
<body>
<script type="text/template" id="dashBoardTemplate">
<p> Hello <%= name %> </p>
</script>
<div class="content-area">
</div>
<script type="text/javascript">
var myMod = Backbone.Model.extend({
   defaults: {
     name: "mo",
     age: "10"
   }
});

var dashView = Backbone.View.extend({
    el: '.content-area',
    template: _.template($("#dashBoardTemplate").html()),
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});
mymod = new myMod({"name": "World", "age":100});
myview = new dashView({model:mymod});  
myview.render();
</script>
</body>
</html>


你好
var myMod=Backbone.Model.extend({
默认值：{
姓名：“mo”，
年龄：“10”
}
});
var dashView=Backbone.View.extend({
el:“.内容区”，
模板：35;.template（$（“#dashBoardTemplate”）.html（），
render:function（）{
this.el.html（this.template（this.model.toJSON（））；
归还这个；
}
});
mymod=新的mymod（{“名称”：“世界”，“年龄”：100}）；
myview=新的dashView（{model:mymod}）；
myview.render（）；

如果你想学习backone.js，请阅读这本让我开始学习的开源书：

这太棒了！谢谢，第二种方法的工作原理与charm类似，只需编辑模板以使其可计算，并且在渲染函数中传递model.toJSON（）或model.attributes，而不传递模型本身。

<html>
<script src="jquery-1.10.2.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone.js"></script>
<body>
<script type="text/template" id="dashBoardTemplate">
<p> Hello <%= name %> </p>
</script>
<div class="content-area">
</div>
<script type="text/javascript">
var myMod = Backbone.Model.extend({
   defaults: {
     name: "mo",
     age: "10"
   }
});

var dashView = Backbone.View.extend({
    el: '.content-area',
    template: _.template($("#dashBoardTemplate").html()),
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});
mymod = new myMod({"name": "World", "age":100});
myview = new dashView({model:mymod});  
myview.render();
</script>
</body>
</html>