Question

我正在尝试通过本教程来学习余烬 - 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","");   
        }
    }
});

Answer 1

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

您在这里所做的只是显示一个复选框。 Ember.Checkbox没有title或titleBinding的概念。如果您只是在该复选框旁边添加{{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/

ember.js - todos示例

1 个答案: