Передача параметров из представлений в контроллеры с помощью Sproutcore 2

Question

Если у меня есть контроллер:

HTH.todosController = SC.ArrayProxy.create({
  content: HTH.store.find(HTH.Todo)
});

Я могу отобразить все задачи, которые делают это:

...
<script type="text/x-handlebars">
  {{#collection contentBinding="HTH.todosController"}}
    {{content}}
  {{/collection}}
</script>
...

Но как бы я отобразил задачу с определенным идентификатором, исходящим из представления?

...
<script type="text/x-handlebars">
  {{#view contentBinding="HTH.todosController.specific" specificId="1"}}
    {{content}}
  {{/view}}
</script>
...

Answer 1

Вот решение в jsfiddle, позволяющее вам определить конкретный идентификатор задачи в определении руля представления, как у вас в вашем примере. Это немного грубо, но это работает.

Рули:

<script type="text/x-handlebars">
{{view App.SpecificIdWrapper}}
<hr />
{{#collection App.TodosView contentBinding="App.todosController"}}
    {{content.name}}
{{/collection}}
<hr />
{{view App.SelectedToDoView}}
</script>

<script type="text/x-handlebars" data-template-name="specificId">
{{#view App.SpecificIdView dataBinding="App.todosController.content" specificId=3}}
    Specific Todo Id: {{content.id}}
    <br />
    Specific Todo Name: {{content.name}}
{{/view}}
</script>

<script type="text/x-handlebars" data-template-name="selectedToDo">
{{#view contentBinding="App.todosController.selectedToDo.content"}}
  Selected Todo Id: {{content.id}}
{{/view}}

JavaScript:

App = Ember.Application.create();

App.SpecificIdWrapper = Ember.View.extend({
    templateName: 'specificId'
});

App.SpecificIdView = Ember.View.extend({
content: null,
data: null,
specificId: null,

_getTodoById: function() {
    var data = this.get('data'); 
    if(data) {
        for(var i=0;i<data.length;i++) {
            if(data[i].get('id') === this.get('specificId')) {
                this.set('content', data[i]);
                break;
            }
        }
    }
},

// This will make sure the content is set when the view is rendered
didInsertElement: function() {
    this._getTodoById();
},
// And this will update the content whenever specificId is changed
specificIdDidChange: function() {
    this._getTodoById();
}.observes('specificId')
});

App.SelectedToDoView = Ember.View.extend({
    templateName: 'selectedToDo'
});

App.TodosView = Ember.CollectionView.extend({
itemViewClass: Ember.View.extend({
    click: function() {
        App.todosController.set('selectedToDo', this);
    }
})
});

App.todosController = Ember.ArrayController.create({
content: [
    Ember.Object.create({id: 1, name: "obj1"}),
    Ember.Object.create({id: 2, name: "obj2"}),
    Ember.Object.create({id: 3, name: "obj3"}),
    Ember.Object.create({id: 4, name: "obj4"}),
    Ember.Object.create({id: 5, name: "obj5"}),
    Ember.Object.create({id: 6, name: "obj6"})
],
selectedToDo: null
});

Answer 2

Вы думаете о мастер-классе / деталях в стиле CRUD?

Если да, вот серия руководств, которые я только что написал для операций CRUD в SC2.

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

CollectionView : SC.CollectionView.extend({
contentBinding: 'App.resultsController',

itemViewClass: SC.View.extend({
  tagName: 'tr',

  // Spit out the content's index in the array proxy as an attribute of the tr element
  attributeBindings: ['contentIndex'],

  willInsertElement: function() {
    this._super();

    // Add handler for double clicking
    var id = this.$().attr('id');
    this.$().dblclick(function() {
      App.statechart.sendAction('showUser', $('#' + this.id).attr('contentIndex'));
    });
  }
})

Часть 4 урока показывает, как я это сделал.

Надеюсь это поможет.