代码之家 › 专栏 › 技术社区 › geoff swartz

ember.js-todos示例

ember.js

geoff swartz · 技术社区 · 13 年前

我正试图通过这个教程来学习余烬- http://www.tuanleaded.com/blog/2012/04/getting-started-with-ember-js-the-missing-to-dos-manual/ 我有下面的html和javascript,但当我运行它并输入一个todo,然后输入回车键时,它只会在列表中添加一个复选框,而不是在带有todo标题的复选框旁边放一个标签。我注意到例子中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","");   
        }
    }
});

1 回复 | 直到 13 年前

Ryan 13 年前

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

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

请参阅Ember.复选框了解它支持/做什么: https://github.com/emberjs/ember.js/blob/master/packages/ember-handlebars/lib/controls/checkbox.js

更新:

我已经把你的小提琴改成可以用了。有很多小变化,如果您有任何问题,请告诉我: http://jsfiddle.net/WKn3P/2/