Question

我使用什么语句在div“#draggableContainers”中附加我的模板？我错过了很简单的事情。

    <html xmlns="http://www.w3.org/1999/xhtml">

无标题页面

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>

<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>

<script src="handlebars-v1.3.0.js"></script>

<script id="draggableTemplate" type="text/x-handlebars-template">
<p>{{value}}</p>
</script>

<script src="practice.js"></script>

和js文件：

var DraggableView = Backbone.View.extend({
    initialize: function () {
        this.render();
    },
    render: function () {

        var source = $("#draggableTemplate").html();
        var template = Handlebars.compile(source);
        var attr = {
            value: "Punit"
        };
        var html = template(attr);
        (this.$el).append(html);
    },
    events: {
        "mouseenter .items": "changeColor",
        "mouseleave .items": "changeColor2"
    },
    changeColor: function () {
        $(this).css("background-color", "#BCB29A");
    },
    changeColor2: function () {
        $(this).css("background-color", "#FFFF9A");
    }
});

var draggable_view = new DraggableView();

Answer 1

我认为你要求编译模板。如果是，则下面是代码

  var draggableSource   = $("#draggableTemplate").html();
  var draggableTemplate = Handlebars.compile(draggableSource);
  var draggable    = cPlanTemplate(yourJsonObJ);  
  $('#draggableContainer').html(draggable);

 <div id="draggableContainer"></div>

Answer 2

猜测。您似乎缺少配置/设置el的{{1}}。在你的DraggableView方法中render，(this.$el).append(html);指向什么？如果您尚未设置，则默认为$el，只需创建一个新的div元素，但永远不会添加到div。

查看view.el

如果您想将模板设置为DOM，请尝试按以下方式设置#draggableContainers：

el

确保您的DOM中存在var DraggableView = Backbone.View.extend({ el : '#draggableContainers', initialize : function() { this.render(); },。

如何将视图附加到元素

2 个答案: