قوالب عميل ASP.NET -

StackOverflow https://stackoverflow.com/questions/895112

  •  23-08-2019
  •  | 
  •  

سؤال

هل من الممكن إعادة استخدام قالب العميل باستخدام قوالب عميل ASP.NET AJAX 4.0؟ لدي سيناريو كما هو موضح في المثال أدناه. لدي سؤالان هنا:

  1. لم أستطع الحصول على عمليات التكييف في قالب العميل
  2. كيف يمكنني إعادة استخدام قالب العلامة UL لمدة ثلاثة أنواع من بيانات "العمود" (COL1، COL2، COL3 على سبيل المثال JSON)؟

عينة من الرموز:

<style>
    .sys-template { display:none; }
    .list {width:220px; float:left;  margin:0px 0px 0px 10px; background-color:#f2f2f2; }
    </style>

    <script src="MicrosoftAjax.debug.js" type="text/javascript"></script>
    <script src="MicrosoftAjaxTemplates.debug.js" type="text/javascript"></script>

    <script type="text/javascript">
        var listItems = [{ item: "item1", col: "col1" },
                         { item: "item2", col: "col1" },
                         { item: "item3", col: "col1" },
                         { item: "item4", col: "col2" },
                         { item: "item5", col: "col2" },
                         { item: "item6", col: "col2" },
                         { item: "item7", col: "col2" },
                         { item: "item8", col: "col3" },
                         { item: "item9", col: "col3" },
                         { item: "item10", col: "col3" }]
    </script>
    </head>

    <body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView" sys:activate="*">
    <ul id="col1" class="list sys-template"  sys:attach="dataview" dataview:data="{{ listItems }}">
        <!--* if (col=="col1") { *-->
        <li>{{item}}</li>
        <!--* } *-->
    </ul>
    <ul id="col2" class="list sys-template"  sys:attach="dataview" dataview:data="{{ listItems }}">
        <!--* if (col=="col2") { *-->
        <li>{{item}}</li>
        <!--* } *-->
    </ul>
    <ul id="col3" class="list sys-template"  sys:attach="dataview" dataview:data="{{ listItems }}">
        <!--* if (col=="col3") { *-->
        <li>{{item}}</li>
        <!--* } *-->
    </ul>
    </body>
هل كانت مفيدة؟

المحلول

شيء من هذا القبيل يجب أن يعمل - أنا مجرد كتابة هذا على ذبابة حتى اغفر لي إذا لم تكن مثالية. 

<ul id="template1" class="sys-template">
  <li code:if="col==$element.id">{{item}}</li>
</ul>

<ul id="col1" class="list sys-template" sys:attach="dataview" dataview:data="{{listItems }}" dataview:itemtemplate="template1">
</ul>
<ul id="col2" class="list sys-template" sys:attach="dataview" dataview:data="{{listItems }}" dataview:itemtemplate="template1">
</ul>
<ul id="col2" class="list sys-template" sys:attach="dataview" dataview:data="{{listItems }}" dataview:itemtemplate="template1">
</ul>

نصائح أخرى

في المعاينة 4، تقوم بحقن رمز باستخدام الرمز: قبل ورمز: بعد السمات بدلا من كتل التعليمات البرمجية للتعليق.

من الممكن أيضا إعادة استخدام القالب. في الواقع، سيقوم الإطار بذلك من أجلك: إذا أشرت إلى خاصية القالب لوجهات نظر بياناتين في نفس العنصر، فسوف يتم تجميع قالب واحد فقط واستخدامه.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top