Getting "Uncaught TypeError: undefined is not a function" when trying to call get() or set() from an object

Question

我一直在研究一个 ember 模板来模仿这个 emberjs tutorial。但是，我不想为属性使用相同的对象，而是想指定此操作来自的 "project" 对象。这些存储在一个数组中，该数组可通过调用模型访问。当我将对象作为特定操作的参数传递时，我可以记录该对象并查看它是否已定义。但是，当我尝试设置或获取属性时，出现错误：

Uncaught TypeError: undefined is not a function

您可以看到我尝试使用的两种方法来解决错误，但是，每次调用仍然会导致错误。

方法一：

contract: function(project){
    var indx = this.projects.indexOf(project)
    console.log(indx);
    this.projects[indx].set('isExtended', false);
}

方法二：

contract: function(project){
        project.set('isExtended', false);
    }

我认为问题与存储在模型或项目中的数组有关。如果有人对如何纠正此类型错误有任何建议，请告诉我。提前致谢，这里是所有相关代码：

HTML:

<script type="text/x-handlebars" id="projects">
      <div class = "row bodeh">
        <div class ="col-lg-12">
            <h1>Projects</h1>
        </div>
        {{#each project in model}}
          <div {{bind-attr class=project.sass style=project.image}}>
            <div class="cont">
              <h1><a {{bind-attr href=project.lynk}}>{{project.title}}</a></h1>
               <p>{{project.body}}</p>
            </div>
            {{#if project.isExtended}}
              <div class="extraMat">
                <button type="button"{{action 'contract' project}}>Contract</button>
                <p>{{project.content}}</p>
              </div>
            {{else}}
              <button type="button"{{action 'expand' project}}>Expand</button>
            {{/if}}

          </div>
        {{/each}}
      </div>

    </script>

EmberJS

App.ProjectsRoute = Ember.Route.extend({
  projects: [],
  actions: {
    expand: function(project) {
      console.log(this.projects.indexOf(project));

      project.set('isExtended', true);
    },
    contract: function(project){
      var indx = this.projects.indexOf(project)
      console.log(indx);
      this.projects[indx].set('isExtended', false);
    }
  },
  model: function() {
    var objects = [];
    //to handle the array less thing with foreach, just add index as a property. Count is also valuable.
    var tuna = {
      bgurl: "img/tunadbo.jpg",
      title: "Tuna", 
      body: "Tuna is a music discovery application. But is it really? TONIGHT, we investigate. ",
      content: "This is the content"
    };
    var greatest = {
      bgurl: "img/great.png", 
      title: "Greatest", 
      body: "You best believe",
      content: "This is the content"
    };
    var sus = {
      bgurl: "img/combatix.png",
      title: "Combatix", 
      body: "Small video game\n",
      content: "This is the content"
    }
    var trust = {
      bgurl: "img/great.png", 
      title: "The Trustiest of the trust\n", 
      body: "Ya know",
      content: "This is the content"
    }
    objects.pushObject(tuna);
    objects.pushObject(greatest);
    objects.pushObject(sus);
    objects.pushObject(trust);
    for(i = 0; i< objects.length; i++)
    {
          objects[i].lynk = "http://tunadbo.appspot.com";
          objects[i].image =  "background-image:url('"+objects[i].bgurl+"');";
          objects[i].isExtended = true;
          objects[i].sass = "col-lg-12 col-sm-12 col-xs-12";
          objects[i].sass += " heedthis hvr-fade";
    }
    this.projects = objects;
    return objects;
  }
});

根据@Beerlington的回答更新JSBin http://emberjs.jsbin.com/davabonoto/2/edit

Answer 1

您得到的错误是因为普通 JavaScript 对象不理解 Ember 的 get/set 函数。有两种方法可以解决这个问题。

1) 您可以将每个对象文字包装在 Ember.Object.create:

这是我正在谈论的例子：

var tuna = Ember.Object.create({
  bgurl: "img/tunadbo.jpg",
  title: "Tuna", 
  body: "Tuna is a music discovery application. But is it really? TONIGHT, we investigate. ",
  content: "This is the content"
});

2) 您可以继续使用对象文字，而不是使用 Ember.set 而不是在对象上调用它：

expand: function(project) {
  Ember.set(project, 'isExtended', true);
},

Getting "Uncaught TypeError: undefined is not a function" when trying to call get() or set() from an object

Getting "Uncaught TypeError: undefined is not a function" when trying to call get() or set() from an object

javascript

ember.js