Как вы обновляете изменения свойств в Ember? Я встречал несколько разных способов сделать это. У меня также есть еще один пост, тесно связанный с этой темой, под названием Ember.js — KVO-совместимый массив объектов.
Итак, как вы можете изменить свои свойства в маршруте или компоненте? или, в более конкретном случае, вложенные маршруты или вложенные компоненты, где свойства передаются на n
уровни в глубину?
Одним из способов обновления изменений свойств в Ember является изменение самого значения, чтобы Ember мог принять это изменение. Например, предположим, что у вас есть маршрут и свойство, настроенное с помощью хука setupController
, и вы визуализируете это свойство.
export default Route.extend({ setupController(model, controller) { this._super(controller, model) controller.setProperties( name: 'Quang' ) } })
Затем где-то еще на моем маршруте я могу установить для этого свойства name
новое значение, и мой шаблон будет обновляться, поскольку для свойства было установлено новое значение, в данном случае ссылка, чтобы быть точным.
// this function lives in the route // so it has access to `this.controller` someFunction() { this.controller.set('name', 'YourName') }
Вот еще один пример, чтобы продемонстрировать вам, что я имею в виду под ссылкой.
Допустим, у нас есть объект в качестве одного из свойств нашего контроллера, и мы хотим отобразить firstName
и lastName
человека в шаблоне,
export default Route.extend({ setupController(model, controller) { this._super(controller, model) controller.setProperties( person: { firstName: 'Quang', lastName: 'Nguyen' } ) } })
и мы меняем свойство имени и фамилии объекта person
в нашем контроллере
changePersonProperties() { this.controller.set('person.firstName', 'newName') }
Но вы быстро заметите, что ваш шаблон не обновился. Ну почему это? Мы явно изменили значение свойства в объекте person
? Разве это не было изменением?
И да и нет. Таким образом, мы изменили значение свойства в объекте person
, но объект person
по-прежнему имеет то же значение или, если быть более точным, указывает на ту же ссылку.
Одним из средств обновления нашего шаблона и отображения изменений является установка объекта person на новый объект с обновленными значениями, например:
changePersonPropertiesAndUpdateView() { let person = { firstName: 'newFirstName', lastName: 'newLastName' } this.controller.set('person', person) }
Теперь у человека есть новое значение, то есть новая ссылка на новый объект, и Ember подхватит это изменение и обновит ваш шаблон/представление.
Так что это был один из способов обновить свойства в Ember.
Второй способ обновления свойств в Ember очень похож, но мы воспользуемся встроенным методом Ember с Ember.set
.
Единственное предостережение при использовании Ember.set
заключается в том, что вы должны указать объект, имя свойства в объекте, на который вы хотите сослаться (в виде строки), и значение, которое вы хотите присвоить этому свойству в качестве первого, второго, и третий аргумент соответственно.
Давайте передадим объект человека для нашей функции, чтобы он ссылался на объект, который мы хотим изменить. Причина, по которой мы передаем объект person, заключается в том, что, делая это, мы можем эффективно следовать модели DDAU Ember по передаче данных компоненту, если мы решим использовать его и обновить изменение в нашем действии.
Вот что я имею в виду:
changePersonProperties(person) { Ember.set(person, 'firstName', 'BOB') }
Простой не так ли? Я часто использую этот метод в своем текущем проекте, и он очень интуитивно понятен для меня. Предостережение, о котором я упоминал ранее, часто происходит, потому что свойство в вашем маршруте/компоненте, которое вы хотите изменить, должно быть объектом. Если это было обычное значение, такое как строка или число, вы должны использовать первое решение, которое было представлено выше.
В любом случае, Ember упростил обновление шаблона/представления, когда вы этого захотите. И я надеюсь, что этот пост поможет вам, разработчикам Ember, стать еще лучше!