從模型傳遞的視圖內訪問數據 - Aurelia

Question

是的另一個Aurelia問題，道歉！

所以我試圖訪問我的視圖中的數據從模型傳遞，雖然我可以看到response內的數據，我似乎無法讓它顯示在視圖上。任何幫助不勝感激。

我已經嘗試了一些東西，但我猜想對Aurelia，ES6和諾言是新的，它會把我扔出去一點，或者我一直在盯着很久。

//編輯數據訪問組件

import {inject} from "aurelia-framework"; 
import {HttpClient} from "aurelia-http-client"; 

let baseUrl = "/FormDesigner"; 

@inject(HttpClient) 
export class FormData{ 

    constructor(httpClient) 
    { 
     this.http = httpClient; 
    } 

    GetFormById(formId) 
    { 
     return this.http.get(`${baseUrl}/GetFormById/${formId}`) 
         .then(f => f.content); 

    }; 
} 

Model：

activate(params) 
{ 
    return this.form.GetFormById(params.formId) 
        .then(f => this.form = f); 
} 

的View：

<p class="navbar-text navbar-left"> 
    ${form.name} 
</p> 

的Response：

{"Id":"x","OrganisationId":"x","OrganisationDepartmentId":null,"ScheduleId":null,"DefinitionTypeId":"x","ReferenceNumber":11171,"Name":"New Form Test External Access","Description":"","IsTemplate":true,"IsActive":true,"IsSingleFormTemplate":false,"MinimumInstances":null,"MaximumInstances":null,"IsAdhocCreationEnabled":false,"HasCalculation":false,"Calculation":null,"Recalculate":true,"IsHidden":false} 

所以我再也看不到數據出現在視圖上，我覺得我錯過了一些相當簡單的事情。

//一個小挖之後編輯

所以我做了一點點改變我的API返回JSON array而非JSON object並切換奧裏利亞使用Fetch ...所以我現在可以訪問數據在我的數據組件中，但不是我的模型 - 相當令人沮喪！

import {inject} from "aurelia-framework"; 
//import {HttpClient} from "aurelia-http-client"; 
//import 'fetch'; 
import {HttpClient} from 'aurelia-fetch-client'; 

let baseUrl = "/FormDesigner"; 

@inject(HttpClient) 
export class FormData{ 

    constructor(httpClient) 
    { 
     httpClient.configure(config => { 
      config 
       .withBaseUrl('/FormDesigner') 
       .withDefaults({ 
        credentials: 'same-origin', 
        headers: { 
         'Accept': 'application/json', 
         'X-Requested-With': 'Fetch' 
        } 
       }) 
       .withInterceptor({ 
        request(request) { 
         console.log(`Requesting ${request.method} ${request.url}`); 
         return request; 
        }, 
        response(response) { 
         console.log(`Received ${response.status} ${response.url}`); 
         return response; 
        } 
       }); 
     }); 

     this.http = httpClient; 
    } 

    GetFormById(formId) 
    { 
     return this.http.fetch(`/GetFormById/${formId}`) 
      .then(response => response.json()) 
      .then(data => { 
       //Log here, to check incoming data 
       console.log("From component: " + data.Name); 
       //This WORKS 
      }); 

    }; 
} 

同樣我創建了一個抽象這裏作爲我的模型並不需要了解服務器調用。

import {inject} from "aurelia-framework"; 
import {FormData} from "form/formData"; 

@inject(FormData) 
export class Form 
{ 

    constructor(formData) 
    { 
     this.form = formData; 

    } 

    activate(params) 
    { 
     if(params.formId != null) 
     { 
      return this.form.GetFormById(params.formId) 
      .then(data => 
      { 
       this.form = data 
       console.log(this.form.Name); 
       //This does not work!! 
      }); 
     } 
     else 
     { 
      //Show message that param does not exist or redirect to no form page 
      console.log("No Id"); 
     } 

    } 
} 

任何幫助非常感謝，

Answer 1

最有可能你需要反序列化JSON響應到使用JSON.parse一個Javascript對象。

GetFormById(formId) 
{ 
    return this.http.get(`${baseUrl}/GetFormById/${formId}`) 
    .then(response => JSON.parse(response.content)); 
};