avalonjs双向数据绑定与监听

<div class="content_table"  ms-controller="checkname">
    <table>
        <tbody >
            <tr>
                <td colspan="2">
                    <a class="refer">立即查询</a>
                </td>
            </tr>
            <tr>
            <td colspan="2">
                <p class="matter">
                    <label>
                        <span>行政区域：</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>字号：</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="请输入第二个公司名称" ms-duplex="@FiledTwo"><br>
                        <input class="thing thing_nn thing_add" type="text" name='t_name' placeholder="请输入第三个公司名称" ms-duplex="@FiledThree">
                        <p class="err_tips"></p>
                        <h4 style="font-weight: 300;width: 80%;margin: 0 0 20px 65px;"><em>提示：</em>1.企业名称=行政区域+字号+行业特点+公司类型，如北京云信科技有限公司，字号则为云信；2.字号由两个以上的汉字组成，不可输入外国文字、汉语拼音、阿拉伯数字；</h4>
                    </label>
                </p>
                </form>
                <p class="matter">
                    <label>
                        <span>行业特点：</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>公司类型：</span>
                        <a style="display: inline-block;">{{@TypeOfCompany}}</a>
                    </label>
                </p>
                <div class="text_t">根据您输入的信息生成的名称如下（请选择您中意的3个名称）：</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>
                    <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="javascript:void(0);">下一步，完善核名信息</a>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.2.4/avalon.min.js"></script>
<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>');
}else if(citys == "绵阳"){
   $('#selArea').append('<option>绵阳市</option>');
}
});
var map = {
    "科技类": ['请选择','科技','教育科技','科技发展','生物科技','电子科技','环保科技','网络科技','生化科技','激光科技','节能科技','能源科技','农业科技','医药科技等'],
    "技术类": ['请选择','技术','环境技术','农业高新技术','检测技术','信息技术','经济技术','消防技术','工程技术','机电技术','生物技术','新能源技术'],
    "文化类": ['请选择','文化','文化发展','文化传播','文化传媒','文化交流'],
};
var vm = avalon.define({
    $id: 'checkname',
    AdministrativeRegions: '天津',
    FiledOne: '可乐',
    FiledTwo: '',
    FiledThree:'',
    Features:'科技',
    TypeOfCompany:'有限公司',
    first: ["科技类", "技术类", "文化类"],
    second: map['科技类'].concat(),
    firstSelected: "科技类",
    secondSelected: "请选择",
});
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()});

</script>