获取“未捕获类型错误：未定义不是函数”当尝试从对象调用get（）或set（） [英] Getting "Uncaught TypeError: undefined is not a function" when trying to call get() or set() from an object

问题描述

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

I've been working on an ember template which mimics this emberjs tutorial. However, instead of using the same object for properties, I want to specify the "project" object from which this action comes from. These are stored in an array which is accessed by calling model. When I pass the object as a parameter for the specific action, I can log the object and see that it is defined. However, when I try to set or get the properties, I get the error:

Uncaught TypeError: undefined is not a function

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

You can see the two methods I attempted to use to work around the error, however, each call still causes an error.

方法一：

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);
    }

我相信该问题与存储在模型或项目中的数组有关。如果任何人有任何建议如何纠正这种类型的错误，请让我知道。提前感谢以下所有相关代码：

I believe the problem is related to the array stored at model or projects. If anyone has any advice how to remedy this type error, please let me know. Thanks ahead of time and here's all of the relevant code:

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

推荐答案

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

The error you're getting is because plain JavaScript objects do not understand Ember's get/set functions. There are two ways you can get around this.

1）您可以在中包装每个对象文字Ember.Object.create ：

以下是我正在谈论的例子：

Here's an example of what I'm talking about:

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 而不是在对象上调用它：

2) You can continue using object literals and instead use Ember.set instead of calling it on the object:

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

这篇关于获取“未捕获类型错误：未定义不是函数”当尝试从对象调用get（）或set（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！