Avalonjs雙向數(shù)據(jù)綁定與監(jiān)聽(tīng)的實(shí)例代碼

<div class="content_table" ms-controller="checkname">
  <table>
    <thead>
      <tr>
        <th width="15%">提交核名</th>
        <th width="85%">請(qǐng)?zhí)峁┠蛩闶褂玫?個(gè)公司名稱(chēng)，我們將幫您注冊(cè)并向登記機(jī)關(guān)提交您的核名信息。</th>
      </tr>
    </thead>
    <tbody >
      <tr>
        <td colspan="2">
          <p class="or">看我的公司名是否已被占用</p>
          <a class="refer">立即查詢(xún)</a>
        </td>
      </tr>
      <tr>
      <td colspan="2">
        <p class="matter">
          <label>
            <span>行政區(qū)域：</span>
            <select name="" id="selArea" class="select_t" :duplex="@AdministrativeRegions">
              <option value="天津市">天津市</option>
            </select>
          </label>
        </p>
        <form action="" id="c_name">
        <p class="matter">
          <label>
            <span>字號(hào)：</span>
            <input class="thing thing_nn" type="text" placeholder="云信" name='c_name' ms-duplex="@FiledOne"><br>
            <input class="thing thing_nn thing_add" type="text" name='s_name' placeholder="請(qǐng)輸入第二個(gè)公司名稱(chēng)" ms-duplex="@FiledTwo"><br>
            <input class="thing thing_nn thing_add" type="text" name='t_name' placeholder="請(qǐng)輸入第三個(gè)公司名稱(chēng)" ms-duplex="@FiledThree">
            <p class="err_tips"></p>
            <h5 ><em>提示：</em>1.企業(yè)名稱(chēng)=行政區(qū)域+字號(hào)+行業(yè)特點(diǎn)+公司類(lèi)型，如北京云信科技有限公司，字號(hào)則為云信；2.字號(hào)由兩個(gè)以上的漢字組成，不可輸入外國(guó)文字、漢語(yǔ)拼音、阿拉伯?dāng)?shù)字；</h5>
          </label>
        </p>
        </form>
        <p class="matter">
          <label>
            <span>行業(yè)特點(diǎn)：</span>
            <select ms-duplex="@firstSelected" class="select_t thing" id="trade_a">
              <option ms-for="el in @first" ms-attr="{value:el}" >{{el}}</option>
            </select>
            <select class="select_t thing" id="trade_b" :duplex="@secondSelected">
              <option ms-for="el in @second" ms-attr="{value:el}" >{{el}}</option>
            </select>
          </label>
        </p>
        <p class="matter">
          <label>
            <span>公司類(lèi)型：</span>
            <a >{{@TypeOfCompany}}</a>
          </label>
        </p>
        <div class="text_t">根據(jù)您輸入的信息生成的名稱(chēng)如下（請(qǐng)選擇您中意的3個(gè)名稱(chēng)）：</div>
        <div class="three_select">
          <label><input type="checkbox" name="apk[]" value="1">{{@AdministrativeRegions + @FiledOne + @secondSelected + @TypeOfCompany}}</label>
          <label><input type="checkbox" name="apk[]" value="2">{{@FiledOne }} ({{@AdministrativeRegions}}) {{@secondSelected + @TypeOfCompany}}</label>
          <label><input type="checkbox" name="apk[]" value="3">{{@FiledOne + @secondSelected }} ({{@AdministrativeRegions}}) {{@TypeOfCompany}}</label>
          <!--<label><input type="checkbox" name="apk[]" value="10">{{@AdministrativeRegions + @FiledOne + @secondSelected + @TypeOfCompany}}</label>
          <label><input type="checkbox" name="apk[]" value="11">{{@FiledOne }} ({{@AdministrativeRegions}}) {{@secondSelected + @TypeOfCompany}}</label>
          <label><input type="checkbox" name="apk[]" value="12">{{@FiledOne + @secondSelected }} ({{@AdministrativeRegions}}) {{@TypeOfCompany}}</label>-->
          <div class="my_comp_f">
            <label><input type="checkbox" name="apk[]" value="4">{{@AdministrativeRegions + @FiledTwo + @secondSelected + @TypeOfCompany}}</label>
            <label><input type="checkbox" name="apk[]" value="5">{{@FiledTwo}} ({{@AdministrativeRegions}}) {{@secondSelected + @TypeOfCompany}}</label>
            <label><input type="checkbox" name="apk[]" value="6">{{@FiledTwo + @secondSelected}} ({{@AdministrativeRegions}}) {{@TypeOfCompany}}</label>
          </div>
          <div class="my_comp_t">
            <label><input type="checkbox" name="apk[]" value="7">{{@AdministrativeRegions + @FiledThree + @secondSelected + @TypeOfCompany}}</label>
            <label><input type="checkbox" name="apk[]" value="8">{{@FiledThree}} ({{@AdministrativeRegions}}) {{@secondSelected + @TypeOfCompany}}</label>
            <label><input type="checkbox" name="apk[]" value="9">{{@FiledThree + @secondSelected}} ({{@AdministrativeRegions}}) {{@TypeOfCompany}}</label>
          </div>
        </div>
        <div class="table_button">
          <!--<a class="next_step" href="submit_name_perfect.html" rel="external nofollow" >下一步，完善核名信息</a>-->
          <a class="next_step" href="javascript:void(0);" rel="external nofollow" >下一步，完善核名信息</a>
        </div>
      </td>
    </tr>
    </tbody>
  </table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.2.4/avalon.min.js"></script>
$(document).ready(function(){
  var citys=$('#selArea').val();
if(citys == "天津市"){
  $('.refer').attr("href","http://zzsb.tjmqa.gov.cn/selfreport/nameregister/goMain");
  $('#selArea').append('<option>天津</option><option>天津?yàn)I海新區(qū)</option><option>天津市濱海新區(qū)</option>');
}else if(citys == "綿陽(yáng)市"){
  $('#selArea').append('<option>綿陽(yáng)</option><option>綿陽(yáng)高新區(qū)</option>');
}
});
var map = {
  "科技類(lèi)": ['請(qǐng)選擇','科技','教育科技','科技發(fā)展','生物科技','電子科技','環(huán)?？萍?,'網(wǎng)絡(luò)科技','生化科技','激光科技','節(jié)能科技','能源科技','農(nóng)業(yè)科技','醫(yī)藥科技等'],
  "技術(shù)類(lèi)": ['請(qǐng)選擇','技術(shù)','環(huán)境技術(shù)','農(nóng)業(yè)高新技術(shù)','檢測(cè)技術(shù)','信息技術(shù)','經(jīng)濟(jì)技術(shù)','消防技術(shù)','工程技術(shù)','機(jī)電技術(shù)','生物技術(shù)','新能源技術(shù)'],
  "文化類(lèi)": ['請(qǐng)選擇','文化','文化發(fā)展','文化傳播','文化傳媒','文化交流'],
  "咨詢(xún)類(lèi)": ['請(qǐng)選擇','咨詢(xún)','信息咨詢(xún)','教育咨詢(xún)','投資咨詢(xún)','管理咨詢(xún)','建筑設(shè)計(jì)咨詢(xún)','文化信息咨詢(xún)'],
  "培訓(xùn)類(lèi)": ['請(qǐng)選擇','培訓(xùn)','技術(shù)培訓(xùn)','企業(yè)管理培訓(xùn)','計(jì)算機(jī)技術(shù)培訓(xùn)'],
  "設(shè)計(jì)類(lèi)": ['請(qǐng)選擇','設(shè)計(jì)','建筑設(shè)計(jì)','家居裝飾設(shè)計(jì)','旅游規(guī)劃設(shè)計(jì)'],
  "服務(wù)類(lèi)": ['請(qǐng)選擇','服務(wù)','勞務(wù)服務(wù)','會(huì)議服務(wù)','家政服務(wù)','商務(wù)服務(wù)','婚慶服務(wù)'],
  "廣告類(lèi)": ['請(qǐng)選擇','廣告','廣告?zhèn)髅?],
  "商貿(mào)類(lèi)": ['請(qǐng)選擇','商貿(mào)','貿(mào)易','服裝裝飾','針紡織品','裝飾品'],
  "貿(mào)易類(lèi)": ['請(qǐng)選擇','進(jìn)出口貿(mào)易'],
  "租賃類(lèi)": ['請(qǐng)選擇','建筑機(jī)械設(shè)備租賃','騎車(chē)租賃'],
  "工程類(lèi)": ['請(qǐng)選擇','工程','建筑工程','裝飾工程','園林綠化工程','照明工程','通訊工程'],
  "物流類(lèi)": ['請(qǐng)選擇','物流','物流運(yùn)輸'],
  "管理類(lèi)": ['請(qǐng)選擇','管理','投資管理','企業(yè)管理','餐飲管理','管理顧問(wèn)','金融管理'],
  "維修類(lèi)": ['請(qǐng)選擇','維修','電器維修','機(jī)械維修'],
  "機(jī)械設(shè)備類(lèi)": ['請(qǐng)選擇','機(jī)械設(shè)備','辦公設(shè)備','消防設(shè)備','自控設(shè)備','機(jī)電設(shè)備','冷暖設(shè)備','環(huán)保設(shè)備','測(cè)試設(shè)備','電力設(shè)備','實(shí)驗(yàn)室設(shè)備'],
  "印刷類(lèi)": ['請(qǐng)選擇','印刷','印刷設(shè)計(jì)','印刷技術(shù)','印刷器材'],
  "醫(yī)療器械": ['請(qǐng)選擇','醫(yī)療器械'],
  "養(yǎng)殖": ['請(qǐng)選擇','養(yǎng)殖'],
  "房地產(chǎn)經(jīng)紀(jì)": ['請(qǐng)選擇','房地產(chǎn)經(jīng)紀(jì)']
};
var vm = avalon.define({
  $id: 'checkname',
  AdministrativeRegions: '天津',
  FiledOne: '云信',
  FiledTwo: '',
  FiledThree:'',
  Features:'科技',
  TypeOfCompany:'有限公司',
  first: ["科技類(lèi)", "技術(shù)類(lèi)", "文化類(lèi)","咨詢(xún)類(lèi)","培訓(xùn)類(lèi)","設(shè)計(jì)類(lèi)","服務(wù)類(lèi)","廣告類(lèi)","商貿(mào)類(lèi)","貿(mào)易類(lèi)","租賃類(lèi)","工程類(lèi)","物流類(lèi)","管理類(lèi)","維修類(lèi)","機(jī)械設(shè)備類(lèi)","印刷類(lèi)","醫(yī)療器械","養(yǎng)殖","房地產(chǎn)經(jīng)紀(jì)"],
  second: map['科技類(lèi)'].concat(),
  firstSelected: "科技類(lèi)",
  secondSelected: "請(qǐng)選擇",
});
vm.$watch("firstSelected", function (a) {
  vm.second = map[a].concat()
  vm.secondSelected = vm.second[0] 
});
vm.$watch("FiledTwo", function (a) {$('.my_comp_f').show()});
vm.$watch("FiledThree", function (a) {$('.my_comp_t').show()});