CODEWITHSUNDEEP
objectpropertiesclickember.js
twiz
twiz

Reputation: 10558

Ember.js click action that changes object property

Basically, I have a template that displays a list of Objects within an ArrayController. Each listed item will have a button that should update a property for that specific Object. I feel like I'm making this more difficult than it is, but I can't seem to figure it out.

Here is the HTML with the template:

  <script type="text/x-handlebars">
      {{view App.MainView}}
  </script>

  <script type="text/x-handlebars" data-template-name="item_template">
      {{#view App.addButtonView}}
          <div id="add_button"><span>Add Item</span></div>
      {{/view}}

      <div id="item_list">
          {{#each App.itemsController}}
              <div class="item_title">{{title}}</div>
                  {{#view App.updateTitleBtnView}}
                       <div class="title_btn">UPDATE THE TITLE</div>
                  {{/view}}
              </div>
          {{/each}}
      </div>
  </script>

Then my script is this:

var App = Em.Application.create({
    ready:function(){
        this.itemsController.createItem();
    }
});

App.Item=Em.Object.extend({
    title:"An Item"
});

App.itemsController = Ember.ArrayController.create({
    content: [],
    createItem: function(){
        var item = App.Item.create();
        this.pushObject(item);
    }
});


App.addButtonView = Ember.View.extend({
    click: function(){
          App.itemsController.createItem();
    }
});

App.updateTitleBtnView = Ember.View.extend({
    click: function(){

        ////////////////////////////////////////////////////////////////
        // Change the value of the title property for a single Object //
        ////////////////////////////////////////////////////////////////

    }
});

App.MainView = Ember.View.extend({
    templateName: 'item_template'
});

What code do I need to include in the view: App.updateTitleBtnView? Am I going about any of this in the right way?

I am new to Ember, so forgive me if this is a stupid question.

Upvotes: 0

Views: 3942

Answers (2)

Bradley Priest
Bradley Priest

Reputation: 7458

You need to make use of the handlebars {{action}} handler.

<script type="text/x-handlebars">
  {{view App.MainView}}
</script>

<script type="text/x-handlebars" data-template-name="item_template">
  <button id="add_button" {{action addItem}}>Add Item</button>

  <div id="item_list">
      {{#each item in App.itemsController}}
          <div class="item_title">{{item.title}}</div>
          <a href="#" {{action updateTitle item}}>UPDATE THE TITLE</a>
      {{/each}}
  </div>
</script>

And put all the view logic on your App.MainView for now.

App.MainView = Ember.View.extend({
  templateName: 'item_template',
  addItem: function(event){
    App.itemsController.createItem();
  },
  updateTitle: function(event){
    event.context.updateTitle()
  }
});

Upvotes: 2

Mudassir Ali
Mudassir Ali

Reputation: 8041

You can also use CollectionView for this..

    var App = Em.Application.create();

    App.itemsController = Ember.ArrayController.create({
        content: [],
        createItem: function(){
            this.pushObject(
                Ember.Object.create({title:"old Title"})
            );
        }
    });

    App.MainView = Ember.CollectionView.extend({
      contentBinding: 'App.itemsController.content'
      itemViewClass: Ember.View.extend({
        update: ->
            this.get('content').set('title', "Updated Title")
      })
    })

    <script type="text/x-handlebars">
      <a {{action createItem target="App.itemsController"}} href="#">Add Item</a>
      {{#collection App.MainView}}
        Title: {{view.content.title}}
        <a {{action update}} href="#"> Update Title </a>
      {{/collection}}
    </script>

Upvotes: 0

Related Questions