Как вы обновляете изменения свойств в 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, стать еще лучше!