Получение «Uncaught TypeError: undefined не является функцией» при попытке вызвать get () или set () из объекта
Я работал над шаблоном Ember, который имитирует этоучебник emberjs, Однако вместо того, чтобы использовать один и тот же объект для свойств, я хочу указать объект "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;
}
});
Обновите JSBin в соответствии с ответом @ Beerlington http://emberjs.jsbin.com/davabonoto/2/edit