1

私はこのチュートリアルを実行して残り火を学習しようとしています-http : //www.tuanleaded.com/blog/2012/04/getting-started-with-ember-js-the-missing-to-dos-manual/I次のhtmlとjavascriptがありますが、それを実行してtodoを入力し、Enterキーを押すと、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","");   
        }
    }
});
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には、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/

于 2012-09-18T03:05:26.230 に答える