gidon. yardımcı veya kısmi?

Question

Bir json nesnesine sahibim, TeamData ile teamData olarak adlandıralım.

Bir aramaya Birincil veya İkincil gibi bir değişkeni iletebilmek ve seçili olan TeamType Durumu ile durumları açılmasını sağlamak istiyorum.

Pek çok tutamaç öğreticisini okudum, ancak bunların hiçbiri bir nesnenin birden fazla özelliğiyle gerçekten ilgilenmiyor veya bir özelliği diğerine nasıl bağlayacağınızı göstermiyor.

devletler açılır

<script type="text/x-handlebars-template" id="tmpl-states"> 
     <select> 
      {{#eachProperty States}} 
       <option name="{{property}}">{{value}}</option> 
      {{/eachProperty}} 
     </select> 
</script> 

Handlebars.registerHelper('eachProperty', function (context, options) { 
    var ret = ""; 
    for (var prop in context) { 
      ret = ret + options.fn({ property: prop, value: context[prop] }); 
    } 
    return ret; 
}); 

basittir ama ne yapmak istiyorum daha hiç gerek için

renderTemplate("tmps-all", "container", "data", "variable"); 

<script type="text/x-handlebars-template" id="tmps-all"> 
     {{#each Teams}} 
      {{#if TeamType == variable}} // e.g. Primary 
       var State = this.State; 
      {{/if}} 
     {{/each}} 
     <select> 
      {{#eachProperty States}} 
       {{#if property == State}} // e.g NY 
       <option name="{{property}}" selected>{{value}}</option> 
       {{/else}} 
       <option name="{{property}}">{{value}}</option> 
       {{/if}} 
      {{/eachProperty}} 
     </select> 
</script> 

var teamData = {"Teams":[{"TeamType":"Primary","State":"NY"},{"TeamType":"Secondary","State":"CA"}],"States":{"AK":"Alaska","AL":"Alabama","AR":"Arkansas","AZ":"Arizona","CA":"California","CO":"Colorado","CT":"Connecticut","DC":"District of Columbia","DE":"Delaware","FL":"Florida","GA":"Georgia","HI":"Hawaii","IA":"Iowa","ID":"Idaho","IL":"Illinois","IN":"Indiana","KS":"Kansas","KY":"Kentucky","LA":"Louisiana","MA":"Massachusetts","MD":"Maryland","ME":"Maine","MI":"Michigan","MN":"Minnesota","MO":"Missouri","MS":"Mississippi","MT":"Montana","NC":"North Carolina","ND":"North Dakota","NE":"Nebraska","NH":"New Hampshire","NJ":"New Jersey","NM":"New Mexico","NV":"Nevada","NY":"New York","OH":"Ohio","OK":"Oklahoma","OR":"Oregon","PA":"Pennsylvania","PR":"Puerto Rico","RI":"Rhode Island","SC":"South Carolina","SD":"South Dakota","TN":"Tennessee","TX":"Texas","UT":"Utah","VA":"Virginia","VT":"Vermont","WA":"Washington","WI":"Wisconsin","WV":"West Virginia","WY":"Wyoming"}};

Answer 1

yoktur (sudo olarak) gibidir eachProperty yardımcınız. Size verdiği işlevsellik, zaten Gidonlarda var. en yani yardımcısı kaldırıp aşağıdakilere Şablonumuzu güncellestirelim (Not: Ben value ile name özelliğini değiştirir):

<select> 
    {{#each States}} 
     <option value="{{@key}}">{{this}}</option> 
    {{/each}} 
</select> 

Şimdi üzerinde atfedilen selected ayar göreve.

Şablonunuza çok fazla mantık deniyorsunuz. Değişkenleri başlatmak için şablon için değil. Bu iş,'dan önce şablonun oluşturulmasından önce yapılmalıdır. Kodumuzun, şablon yöntemini şablona ihtiyaç duyduğu tüm verileri vermesi için çağırmasını istiyoruz. Bu böyle bizim şablona bir veri yapısını geçirmeden anlamına gelecektir:

[ 
    { 
     value: 'AK', 
     label: 'Alaska', 
     selected: false 
    }, 
    { 
     value: 'AL', 
     label: 'Alabama', 
     selected: false 
    }, 
    // and so on... 
] 

bu veri yapısının oluşturulması çalışmalarını yapacak Bizim kod

:

var selected_team = teamData.Teams.find(team => team.TeamType === 'Primary'); 
var states = Object.keys(teamData.States).map(key => ({ 
    value: key, 
    label: teamData.States[key], 
    selected: (key === selected_team.State) 
})); 

Şimdi yeni verileri işlemek için Şablonumuzu değiştirebilir yapısı:

<select> 
    {{#each this}} 
     <option value="{{value}}" {{#if selected}}selected{{/if}}>{{label}}</option> 
    {{/each}} 
</select> 

bizim şablonu diyoruz, biz sadece bizim states değişkeninde geçmesi:

renderTemplate(states); 

Ancak: Tüm bu arka planda çalışmalarımızda, bu şablonu yeniden seçilen bir seçeneği yansıtmak için yeniden görüntülemede hiçbir amaç görmediğimi eklemek istiyorum. Değişimi yapmak için DOM'ı kullanmam daha mantıklı. aşağıdaki gibi bir şey yeterli olacaktır:

document.querySelector('#Select [value="NY"]').selected = true; 

Bkz: https://stackoverflow.com/a/7373115/3397771