1

我正在尝试通过本教程学习 ember - http://www.tuanleaded.com/blog/2012/04/getting-started-with-ember-js-the-missing-to-dos-manual/ 我有以下 html 和 javascript 但是当我运行它并输入一个待办事项时，然后输入一个回车键，它只会在列表中添加一个复选框，而不是在复选框旁边放置一个带有待办事项标题的标签。我注意到示例中 ember.js 附带的 todo 项目做同样的事情，我不知道为什么。

这是html。

<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]--> <!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]--> <!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]--> <!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>
  <meta name="description" content="">
  <meta name="author" content="">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="stylesheet" href="css/style.css?v=2">

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
  <script type="text/x-handlebars">
    {{view Todos.CreateToDoView id="new-todo" placeholder="What needs to be done?"}}

    {{#collection contentBinding="Todos.todosController" tagName="ul" itemClassBinding="content.isDone"}}
        {{view Em.Checkbox titleBinding="content.title" valueBinding="content.isDone"}}
    {{/collection}}
  </script>

  <!-- The missing protocol means that it will match the current protocol, either http or https. If running locally, we use the local jQuery. -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
  <script src="js/libs/handlebars-1.0.0.beta.6.js"></script>
  <script src="js/libs/ember-1.0.pre.min.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

这是我的 app.js 文件...

/*models*/

var Todos = Em.Application.create();

Todos.Todo = Em.Object.extend({
    title: null,
    isDone: false
});


/*controller*/

Todos.todosController = Em.ArrayProxy.create({
    content:[],

    createTodo: function(title){
        var todo = Todos.Todo.create({ title: title });
        this.pushObject(todo);  
    }
});

/*views*/

Todos.CreateToDoView = Em.TextField.extend({
    insertNewline : function(){
        var value = this.get("value");

        if (value){
            Todos.todosController.createTodo(value);
            this.set("value","");   
        }
    }
});
4

1 回答 1

1 
{{#collection contentBinding="Todos.todosController" tagName="ul" itemClassBinding="content.isDone"}}
     {{view Em.Checkbox titleBinding="content.title" valueBinding="content.isDone"}}
{{/collection}}

您在这里所做的只是显示一个复选框。Ember.Checkbox 没有标题或标题绑定的概念。如果您只是{{view.content.title}}在该复选框旁边添加，您会在它旁边看到标题显示。

请参阅 Ember.Checkbox 了解它的支持/功能：https ://github.com/emberjs/ember.js/blob/master/packages/ember-handlebars/lib/controls/checkbox.js

更新：

我已经改变了你的小提琴工作。很多小改动，如果您有任何问题，请告诉我：http: //jsfiddle.net/WKn3P/2/

于 2012-09-18T03:05:26.230 回答