将模型对象传递到 Backbone.js 中的视图

mdfafbf1  于 2022-11-10  发布在  其他
关注(0)|答案(2)|浏览(226)

我一直在尝试在模板中传递一个要求值的模型对象,但没有成功。
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:我用的是下划线模板引擎

hujrc8aj

hujrc8aj1#

此外,将模型传递给视图的方式并不灵活,因为您将传递模型的示例,而不是默认模型。

this.mymodel = new myMod({}),

(btw,由于“=”符号,上面一行在我的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>

如果你想学习backone.js,请阅读这本开源书籍,让我开始:
http://addyosmani.github.io/backbone-fundamentals/

nafvub8i

nafvub8i2#

您需要使用getter语法获取 Backbone.js 模型的属性,因此您需要重写模板以:

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

或者,当调用_.template时,您需要将模型转换为普通JS对象,您可以使用.toJSON()(创建模型的克隆)或.attributes属性执行以下操作:

template: _.template(dashBoardTemplate, this.mymodel.toJSON())

旁注:你应该考虑将模板呈现逻辑移到你的视图中。因为你当前的代码是在声明视图时呈现模板的,而不是在调用render方法时。所以你可能会得到意想不到的结果。所以你的代码看起来像这样:

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

相关问题