JSViewを使用したドロップダウン内の複雑なオブジェクト

Question

私はJSViews、Observables、およびTypeScriptを使ってプロジェクトを進めています。 私はフランス語と英語のバージョンを保持するオブジェクトを持っているので、私はいくつかの言語を処理することを計画しました。すべての静的オブジェクトを持つ名前コレクションと配列を返す静的メソッドを持つクラス。

英語の名前を取得するためにコンバータを使用してオブジェクトを表示したかったので、ドロップダウンを埋めて変更に反応しましたが、現在のアイテムをドロップダウンに表示することができず、表示されません何が欠けている。

助けてください。私はここではJavaScriptサンプルを作った： https://jsfiddle.net/ClaudeVernier/v093uqg0/

var data = new dataModel(); 
    for (var member in Harbors) { 
    if (typeof Harbors[member] == "object" && Harbors[member].name) { 
    data.harbors.push(Harbors[member]); 
    } 
} 

var myTmpl = $.templates("#harborTmpl"); 
myTmpl.link("#container", data); 
    $.observe(data, "*", myHandler); 

あなたはその上でアイデアを持っている場合はその後、私は、ボタンのクリックで言語を変更する方法を理解する必要があります...それは:-)役立つだろうセクション<select> with converters含む -

多くのおかげで、 クロード

Answer 1

はData-linked <select> elementsを見てみましょう。

あなたのコード：

<select id="cboHarbor" data-link="{{getName:activeHarbor}}"> 

が正しくありません。 activeHarborにデータリンクする必要があります。 activeHarborが文字列だった場合は、データリンク使用できます

<select id="cboHarbor" data-link="activeHarbor"> 

が、それはあなたが各オプションに使用できることを、あなたは各港のオブジェクトの文字列値を持つプロパティのいくつかの種類を持っている必要がオブジェクトであるため、値。次に、コンバーターを使用して、データリンクバインディング動作のactiveHarborオブジェクトとその文字列値プロパティの間で前後に変換します。

たとえば、現在の言語の名前を文字列値として使用できますが、現在の言語に基づいて変更される値を使用するのは少し奇妙です。しかし、getHarborコンバータを名前からharborオブジェクトに戻すために変換する必要があります。それは次のようになります。

<select id="cboHarbor" data-link="{getName:activeHarbor:getHarbor}"> 
    {^{for harbors}} 
    <option data-link="{getName:}"></option> 
    {{/for}} 
</select> 

また、あなたはこのように、配列内の港のインデックスを使用することができますコンバータと

<select id="cboHarbor" data-link="{getIndex:activeHarbor:getHarbor}"> 
    {^{for harbors}} 
    <option value="{{:#index}}" data-link="{getName:}"></option> 
    {{/for}} 
</select> 

次のように：

$.views.converters({ 
    getIndex: function (harbor) { 
    return harbor.index; 
    }, 
    getHarbor: function (index) { 
    return data.harbors[index]; 
    }, 
    getName: function (harbor) { 
    return harbor.name[data.languages[data.currentLanguage]]; 
    } 
}); 

あなたの場合動的に言語を変更し、新しい言語への港湾のドロップダウンスイッチを持つようにするには、getNameコンバータをthなどの現在の言語に依存させる必要があります次のとおりです。

$.views.converters.getName.depends = [data, "currentLanguage"]; 

ここで言語を切り替えるには、言語のドロップダウンでupdated version of your jsfiddle完全です。

UPDATE：

function getName(harbor) { 
    return harbor.name[data.languages[data.currentLanguage]]; 
} 

$.views.converters({ 
    getName: getName, 
    ... 
}); 

getName.depends = [data, "currentLanguage"]; 

だからあなたは、単にあなたのコンバータ機能としてgetName機能を使用することができ、その後、あなたが持っている文脈で：dependsgetName用に関する

、modified jsFiddleはこのありデータインスタンスへのアクセス（done()で非同期にする必要がある場合）、次に依存を割り当てます。

getName.depends = [data, "currentLanguage"]; 

いいえ使用する必要はありません$.views.converters.getName.depends

Answer 2

ありがとうございます！

港湾のために働く、私はコンバータの前後を考えていない。ローカライズのために

、私は活字体でそれを書いていて、$ .views.converters.getName.dependsはそうコンパイルしていなかった私はlinkTemplate後にそれを追加しようとしました：

this.linkTemplate("options", "#optionsTmpl", this).done(
     function (currentGame: UnchartedGame) { 
       $.observe(currentGame, "*", currentGame.gameModelChangeHandler); 

       $.views.converters["getName"].depends = [currentGame, "activeLanguage"]; 
     } 
); 

それはしていないようですしかし、それは["getName"]か他の場所のためにできますか？

この私が趣味で始めたプロジェクトである、それは初期段階にあり、ここで見ることができます：

Answer 3

:-) http://unchartedwaters2.azurewebsites.net/ 私はオブジェクト上JSObservable.dependsメソッドを呼び出すために問題を抱えていますこれはTypeScriptで定義されています。 私は、都市、現在の都市の名前と言語のオプションとのドロップダウンを示す私のWebページの小さなバージョンを作成しました。

私はそれがすべて起こるところコンバータ

にUnchartedGameクラスがあるとき、そのGetNameメソッドは、によって呼び出さ一つでコンパイルするコードを有効にするには、言語や都市のクラス（港）、2 IJSViews *インタフェースを持っていますInitメソッドはデータモデルをロードし、テンプレートをロードします。

テンプレートがリンクされたら、依存関係を設定して、都市の内容が次の行でドロップダウンスイッチ言語になるようにします。 currentGame.GetName.depends = [currentGame、 "activeLanguage"]; しかし、それは動作しません "コンパイラ"、依存GetNameメソッドのメソッドではありません！

Index.htmlと

<script type="text/javascript" src="scripts/jquery-3.2.1.js"></script> 
<script type="text/javascript" src="scripts/js/jsrender.js"></script> 
<script type="text/javascript" src="scripts/js/jquery.observable.js"></script> 
<script type="text/javascript" src="scripts/js/jquery.views.js"></script> 
<script type="text/javascript" src="scripts/game/game.js"></script> 

<div id="view" style="padding: 5px;"> 
    <div id="optionsTmpl"></div> 
</div> 

options.tmpl.html

<select id="cboHarbor" data-link="{getIndex:activeHarbor:getHarbor}"> 
     {^{for harbors}} 
     <option value="{{:#index}}" data-link="{getName:}"></option> 
     {{/for}} 
    </select> 
    <select id="cboLanguage" data-link="activeLanguage"> 
     {^{props languages}} 
     <option>{{:key}}</option> 
     {{/props}} 
    </select> 

game.ts私はいくつかの時間を費やしている

/// <reference path="../typings/jquery/jquery.d.ts" /> 
/// <reference path="../typings/jsrender/jsrender.d.ts" /> 

window.onload =() => { 
    let game: UnchartedGame; 
    this.game = new UnchartedGame(); 

    $.views.converters({ 
     getIndex: function (harbor) { 
      return harbor.index; 
     }, 
     getHarbor: function (index) { 
      return this.ctx.root.harbors[index]; 
     }, 
     getName: this.game.GetName 
    }); 
    this.game.load(); 
}; 

/* 
* INTERFACES 
*/ 

interface IDictionnary { 
    [idx: number]: string; 
} 

interface IHasName { 
    name: IDictionnary; 
} 

interface IJSViewsContextHolder { 
    ctx: IJSViewsRootHolder 
} 

interface IJSViewsRootHolder { 
    root: UnchartedGame 
} 

interface IHarbor { 
    index: number; 
    name: IDictionnary; 
} 

/* 
* CLASSES 
*/ 

class Languages { 
    ["English"] = 0; 
    ["French"] = 1; 
} 

class GameStrings { 
    static Brest: IDictionnary = { 
     ["English"]: "Brest", 
     ["French"]: "Brest" 
    }; 

    static London: IDictionnary = { 
     ["English"]: "London", 
     ["French"]: "Londres" 
    }; 

    static QuebecCity: IDictionnary = { 
     ["English"]: "Quebec city", 
     ["French"]: "Ville de Québec" 
    }; 
} 

class Harbor implements IHarbor, IHasName { 

    public index: number = 0; 

    /* Methods */ 
    constructor(public name: IDictionnary) { 
    } 
} 

class Harbors { 

    static Brest: IHarbor = new Harbor(
     GameStrings.Brest 
    ); 

    static London: IHarbor = new Harbor(
     GameStrings.London 
    ); 

    static QuebecCity: IHarbor = new Harbor(
     GameStrings.QuebecCity 
    ); 
} 

class UnchartedGame { 

    public activeLanguage: string = "English"; 

    public languages: Languages = new Languages(); 
    public activeHarbor: Harbor = null; 
    public harbors: Array<Harbor> = null; 
    public ctx: IJSViewsRootHolder; 
    constructor() { 
    } 
    GetName(harbor: IHarbor): any { 
     return harbor.name[(this as IJSViewsContextHolder).ctx.root.activeLanguage]; 
    } 
    load() { 
     let idx: number = 0; 
     this.harbors = new Array<Harbor>(); 

     for (var member in Harbors) { 
      Harbors[member].index = idx++; 

      if (!this.activeHarbor) { 
       this.activeHarbor = Harbors[member]; 
      } 

      this.harbors.push(Harbors[member]); 
     } 

     this.linkTemplate("options", "#optionsTmpl", this).done(function (currentGame: UnchartedGame) { 
      //currentGame.GetName.depends = [currentGame, "activeLanguage"]; 
     }); 
    } 

    loadTemplate(tmplName: string) { 
     var deferredLoad = $.Deferred(); 

     try { 
      var filePath: string = "../" + tmplName + ".tmpl.html"; 

      $.get(filePath).then(function (templateText) { 
       $.templates(tmplName, templateText); 
       deferredLoad.resolve(); 
      }) 
     } 
     catch (e) { 
      deferredLoad.reject(); 
     } 

     return deferredLoad.promise(); 
    } 

    linkTemplate(tmplName: string, targetId: string, model: UnchartedGame) { 
     var deferredLink = $.Deferred(); 

     this.loadTemplate(tmplName).done(
      function() { 
       $.templates[tmplName].link(targetId, model); 
       deferredLink.resolve(model); 
      } 
     ); 

     return deferredLink.promise(); 
    } 
} 

：

は、私は3つのファイルを持っていますこれを明確にしてそれがここに収まるように、あなたが理解するのに十分なほど明確になることを願っています。

よろしく、 クロード