почему вид позвоночник не получает визуализации

это ниже код, который я использую для простой задачи добавлять, просматривать не получает визуализации, я не могу найти ошибку,почему вид позвоночник не получает визуализации

<!doctype html> 
<html lang="en"> 
<head> 

    <title>Calculator</title> 
    <link rel="stylesheet" href="styles/bootstrap/css/bootstrap.min.css"> 
    <script src="js/libs/jquery-1.9.1.min.js"></script> 
    <script src="js/libs/underscore-min.js"></script> 
    <script src="js/libs/backbone-min.js"></script> 
    <script type="text/template" id="display-template"> 
     <div class="row"> 
      <div class="span4"> 
       <%=content%> 
      </div> 
     </div> 
    </script> 
<script language="javascript"> 
var cdate; 
var tasks={}; 

var app = app || {}; 

// App view responsible for rendering app 
app.TaskView = Backbone.View.extend({ 

    el: $('#tasks'), 

    template: _.template($('#display-template').html()), 

    initialize: function() { 
     this.render(); 
    }, 

    render: function() { 
     console.log("render called"); 
     console.log(this.template()); 
     this.$el.html(this.template()); 
    } 
}); 
app.task = Backbone.Model.extend({ 

    defaults:{ 
     content:null 
    } 
}); 
app.bUsers = Backbone.Collection.extend({ 
    model : app.task, 
    initialize: function(models, args) { 
     this.bind('add', this.renderone); 
     this.bind('remove', this.destroy); }, 
    renderone:function(user){ 
     console.log(user); 
     var view = new app.TaskView({model: user}); 
    }, 
    destroy:function(user){ 
     $(user.view.el).remove(); 
    } 
}); 

app.Users = new app.bUsers(); 

$(document).ready(function() { 



    cdate=new Date(); 
    $("#cdate").html(new Date()); 
    $("#pre").click(function(){ 
     cdate=new Date(cdate.getTime()-(1*24*3600*1000)); 
     $("#cdate").html(cdate); 

    }); 
    $("#next").click(function(){ 
     cdate=new Date(cdate.getTime()+(1*24*3600*1000)); 
     $("#cdate").html(cdate); 

    }); 
    $("#submit").click(function(){ 
     if(tasks[cdate]==undefined) tasks[cdate]=[]; 
     tasks[cdate].push($("#task").val()); 
     // app.appView = new app.TaskView({ 
      // model: new app.task({"content":$("#task").val()}) 
     // }); 
     var data ={"content":$("#task").val()}; 
     app.Users.add(data); 


    }); 


}); 

</script> 

</head> 
<body> 

<a id="pre" href="#">Prev</a> 
<div id="cdate"></div> 
<a id="next" href="#">Next</a> 
<input type="text" id="task" ></input> 
<input type="button" value="submit" id="submit" ></input> 
<div id="tasks"></div> 
</body>

источник

2013-07-03 XMen

Вы видите ошибку в консоли? –

какой из журналов вы видите? –

Oye, вы» у вас есть несколько проблем.

Чтобы ответить на ваш конкретный вопрос, ваш метод визуализации вашего представления должен взять экземпляр модели вашего представления и получить что-то от this.model.toJSON(), чтобы получить свои данные для перехода к методу шаблона (toJSON действительно возвращает объекты «JSONable»).

Но это еще не все.

Помимо нескольких проблем с html, у вас также есть стилистические проблемы.

Коллекции, как правило, не должны касаться представлений, а только данных (*). Взгляды должны быть связаны с коллекциями и моделями. Коллекции обмениваются мнениями через привязку событий, которые, как я вижу, вы делаете. Однако для целей повторного использования у вас может быть несколько представлений комбинации, которые могут захотеть прослушивать события в коллекции. Установив привязку событий в коллекции, вы фактически ограничили свою коллекцию только одним использованием.

Просмотров могут делать много. Не так много причин вручную добавлять обработчики событий DOM, когда вы можете закодировать представление, чтобы сделать это за вас.

Я не написал Магию через некоторое время (не по выбору!), Но в целом нашел, что было бы неплохо иметь представление, посвященное коллекции, а затем иметь отдельное представление модели, создавать или уничтожать, основываясь на любых событиях.

Вот немного очистки вашего кода, чтобы дать вам начальный пример:

http://jsfiddle.net/jfcox/SmPNv/

HTML:

<a id="pre" href="#">Prev</a> 

<div id="cdate">&nbsp;</div> 
<a id="next" href="#">Next</a> 

<input type="text" id="task" /> 
<input type="button" value="add" id="submit" /> 
<div id="tasks"></div>

определений Магистральные:

var defs = defs || {}; 
//first define the data handlers 
defs.Task = Backbone.Model.extend({ 
    defaults: function() { 
     return { 
      content: null, 
      addDate: (new Date()).toString() 
     }; 
    } 
}); 
defs.Users = Backbone.Collection.extend({ 
    model: defs.Task 
}); 


// App view responsible for rendering app 
defs.SingleTaskView = Backbone.View.extend({ 
    //since we can't control where the js is loaded, go ahead and make the template inline for jsFiddle demo. 
    tagName: 'div', 
    template: _.template('<div class="row"> <div class="span4"><%=content%></div> <em><%=addDate%></em> <button class="remove"> remove</remove> </div>'), 
    events: { 
     "click button.remove": "remove" 
    }, 
    initialize: function (opts) { 
     this.model.on('change', this.render, this); 
    }, 
    render: function() { 
     console.log("render called"); 
     var modelBare = this.model.toJSON(); 
     return this.$el.html(this.template(modelBare)); 
    }, 
    remove: function() { 
     //removes from local collection, does not delete on server 
     //for that, you'd want `this.model.destroy` 
     this.collection.remove(this.model); 
     //removes this view's element. 
     this.$el.remove(); 
    } 
}) 

defs.TasksView = Backbone.View.extend({ 

    el: 'body', 
    events: { 
     "click #pre": "doPrevious", 
      "click #next ": "doNext", 
      "click #submit ": "doSubmit" 
    }, 
    cdate: null, 
    initialize: function (opts) { 
     this.cdate = new Date(); 
     this.render(); 
     this.collection.on('add', this.renderone, this); 
    }, 
    render: function() { 
     $("#cdate").html(this.cdate.toString()); 
    }, 
    doPrevious: function() { 
     this.cdate = new Date(this.cdate.getTime() - (1 * 24 * 3600 * 1000)); 
     $("#cdate").html(this.cdate.toString()); 

    }, 
    doNext: function() { 
     this.cdate = new Date(this.cdate.getTime() + (1 * 24 * 3600 * 1000)); 
     $("#cdate").html(this.cdate.toString()); 
    }, 
    doSubmit: function() { 
     var data = { 
      "content": $("#task").val() 
     }; 
     this.collection.add([data]); 
    }, 
    renderone: function (userModel) { 
     var view = new defs.SingleTaskView({ 
      model: userModel, 
      collection: this.collection 
     }); 
     this.$el.find('#tasks').append(view.render()); 
    } 
});

Применение , сам.

var app = app || {}; 

app.users = new defs.Users(); 
(function ($) { 
    $(document).ready(function() { 
     app.usersview = new defs.TasksView({ 
      collection: app.users 
     }); 

    }); 
})(jQuery);

(*) Это руководство, а не абсолютное правило, конечно. Если вы считаете, что коллекция может работать как менеджер рабочего процесса и т. Д., Это может быть хорошо, но это расширенная тема.

Редактировать: я включил шаблон встроенный, частично по причинам, по которым я не доверяю jsFiddle со встроенными «текстовыми» сценариями. Я не рекомендую никаких способов справиться с этим, именно так я и сделал это здесь.

источник

2013-07-03 23:39:13 JayC

Вы не должны использовать 'toJSON()' вручную. Лучшим, более идиоматичным способом получения тех же результатов является использование свойства 'attributes' модели. 'this.template (model.attributes)' – mor

Когда я изучал Backbone.js, многие учебники использовали 'toJSON', а некоторые источники даже рекомендовали использовать хэш-хэш внутренних атрибутов. Я мог видеть случаи, когда было бы полезно называть 'toJSON', хотя это может быть только в тех случаях, когда вы просто хотите передать целую кучу данных из коллекции в какое-то альтернативное решение для шаблонов вместо того, чтобы делать просмотр в per- модель предмет подобный сделал выше.Но в противном случае, конечно, использование 'toJSON' может привести к кучке ненужных копий и больше для сборщика мусора, чтобы пройти, когда эти копии будут использованы. – JayC

почему вид позвоночник не получает визуализации

ответ

Смежные вопросы