基於obj.id設置元素類的Aurelia問題=== $ parent.selectedId

Question

我完成了Aurelia.io的聯繫人管理器教程，並將它合併到作爲任務管理器的tut中。下面的標記根據task.id === $ parent.id設置li類。

task-list.html

<template> 
<div class="task-list"> 
    <ul class="list-group"> 
     <li repeat.for="task of tasks" class="list-group-item ${task.id === $parent.selectedId ? 'active' : ''}"> 
      <a route-href="route: tasks; params.bind: {id:task.id}" click.delegate="$parent.select(task)"> 
       <h4 class="list-group-item-heading">${task.name}</h4> 
       <span class="list-group-item-text ">${task.due | dateFormat}</span> 
       <p class="list-group-item-text">${task.isCompleted}</p> 
      </a> 
     </li> 
    </ul> 
</div> 

task-list.js

@inject(WebAPI, EventAggregator) 
export class TaskList { 
    constructor(api, ea) { 
     this.api = api; 
     this.tasks = []; 
     ea.subscribe(TaskViewed, x => this.select(x.task)); 
     ea.subscribe(TaskUpdated, x => { 
      let id = x.task.id; 
      let task = this.tasks.find(x => x.id == id); 
      Object.assign(task, x.task); 
     }); 
    } 

    created() { 
     this.api.getList().then(x => this.tasks = x); 
    } 

    select(task) { 
     this.selectedId = task.id; 
     return true; 
    } 
} 

如果我通過 task-detail.html

<template> 
<require from="resources/attributes/DatePicker"></require> 
<div class="panel panel-primary"> 
    <div class="panel-heading"> 
     <h3 class="panel-title">Edit Task Profile</h3> 
    </div> 
    <div class="panel-body"> 
     <form role="form" class="form-horizontal"> 
      <div class="form-group"> 
       <label class="col-sm-2 control-label">Name</label> 
       <div class="col-sm-10"> 
        <input type="text" placeholder="name" class="form-control" value.bind="task.name"> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label class="col-sm-2 control-label">Description</label> 
       <div class="col-sm-10"> 
        <input type="text" placeholder="description" class="form-control" value.bind="task.description"> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label class="col-sm-2 control-label">Due Date</label> 
       <div class="col-sm-10"> 
        <div class="input-group date"> 
        <input type="text" datepicker class="form-control" value.bind="task.due | dateFormat:'L'"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span> 
        </div> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label class="col-sm-2 control-label">Urgency</label> 
       <div class="col-sm-10"> 
        <input type="range" min="1" max="5" step="1" class="form-control" value.bind="task.urgency"> 
       </div> 
      </div> 
     </form> 
    </div> 
</div> 

<div class="button-bar"> 
    <button class="btn btn-info" click.delegate="addTask(task)" >Add New</button> 
    <button class="btn btn-success" click.delegate="save()" disabled.bind="!canSave">Save Edit</button> 
</div> 

</template> 

編輯當前任務，代表

task-detail.js

@inject(WebAPI, EventAggregator, Utils, DialogService) 
export class TaskDetail { 

constructor(api, ea, utils, dialogService) { 
    this.api = api; 
    this.ea = ea; 
    this.utils = utils; 
    this.dialogService = dialogService; 
} 

    activate(params, routeConfig) { 
     this.routeConfig = routeConfig; 

     return this.api.getTaskDetails(params.id).then(task => { 
      this.task = task; 
      this.routeConfig.navModel.setTitle(task.name); 
      this.originalTask = this.utils.copyObj(task); 
      this.ea.publish(new TaskViewed(task)); 
     }); 
    } 

    get canSave() { 
     return this.task.name && !this.api.isRequesting; 
    } 

    save() { 
     console.log(this.task); 
     this.api.saveTask(this.task).then(task => { 
      this.task = task; 
      this.routeConfig.navModel.setTitle(task.name); 
      this.originalTask = this.utils.copyObj(task); 
      this.ea.publish(new TaskUpdated(this.task)); 
     }); 
    } 

    canDeactivate() { 
     if (!this.utils.objEq(this.originalTask, this.task)) { 
      let result = confirm('You have unsaved changes. Are you sure you wish to leave?'); 

      if (!result) { 
       this.ea.publish(new TaskViewed(this.task)); 
      } 
      return result; 
     } 
     return true; 
    } 

    addTask(task) { 
     var original = this.utils.copyObj(task); 
     this.dialogService.open({viewModel: AddTask, model: this.utils.copyObj(this.task)}) 
      .then(result => { 
       if (result.wasCancelled) { 
        this.task.name = original.title; 
        this.task.description = original.description; 
       } 
     }); 
    } 
} 

如果值發生了變化，從導航當前任務走是不允許的，而且工作 - 也就是說，UI的接觸細節部分並沒有改變。但是，嘗試導航的任務<li>仍然會應用活動類。這不應該發生。

如果我在開發工具中使用Aurelia.io聯繫人管理器，我發現活動類被簡單地應用於列表項，然後它就消失了。

來自聯繫人管理器的contact-list.js單擊<li>並且沒有選擇任何優先項目時運行。

select(contact) { 
    this.selectedId = contact.id; 
    console.log(contact); 
    return true; 
    } 

這將記錄

Object {__observers__: Object} 
Object {id: 2, firstName: "Clive", lastName: "Lewis", email: "lewis@inklings.com", phoneNumber: "867-5309"} 

相同的代碼在我的任務管理器的（很明顯，「接觸」的任務改爲「）task-list.js日誌

Object {description: "Meeting With The Bobs", urgency: "5", __observers__: Object} 
Object {id: 2, name: "Meeting", description: "Meeting With The Bobs", due: "2016-09-27T22:30:00.000Z", isCompleted: false…} 

Answer 1

固定它。它沒有工作，因爲我啓用了pushstate。這清除了一切。感謝therealklanni。

Answer 2

我的第一反應是說它與某事有關this.selectedId = contact.id

this那裏會提到我所假設的一個叫做select的函數（看起來你的例子中缺少function關鍵字？）或全局對象（即， window）

select(contact) { this.selectedId = contact.id; console.log(contact); return true; }