C# 基于字符串的剔除可观测数组过滤
我现在正试图解决一个小问题 我有以下代码。我尝试根据所选的类型过滤并重新渲染抓取的电影列表 到目前为止，我能够在我的js脚本中将所选选项强制转换为一个对象，但我不知道从这里可以走到哪里。我的observable数组中的类型值是它自己的数组，因为一部电影可以有多种类型 以下是我目前的脚本：C# 基于字符串的剔除可观测数组过滤,c#,html,knockout.js,C#,Html,Knockout.js,我现在正试图解决一个小问题 我有以下代码。我尝试根据所选的类型过滤并重新渲染抓取的电影列表 到目前为止，我能够在我的js脚本中将所选选项强制转换为一个对象，但我不知道从这里可以走到哪里。我的observable数组中的类型值是它自己的数组，因为一部电影可以有多种类型 以下是我目前的脚本： define(['knockout', 'dataservice'], (ko, dataservice) => { return function () { let movies = ko.ob
define(['knockout', 'dataservice'], (ko, dataservice) => {
return function () {
let movies = ko.observableArray([]);
let movieList = ko.observableArray([])
let genres = ko.observableArray([]);
let pageSizes = ko.observableArray();
let prev = ko.observableArray();
let next = ko.observableArray();
let selectedPage = ko.observableArray([10]);
self.selectedGenre = ko.observable();
let objGenre = ko.observable();
let movieGenres = ko.observable();
self.selectedGenre.subscribe(() => {
objGenre = selectedGenre().name;
console.log(objGenre)
});
console.log(chosenGenre)
self.getMovies = function () {
ko.mapping.fromJS(data.movies, {}, self.movies)
}
let getMovies = url => {
dataservice.getMovies(url, data => {
pageSizes(data.pageSizes);
prev(data.prev || undefined);
next(data.next || undefined);
movieList(data.movieList);
movieGenres(movieList.genre)
});
}
let getGenres = function () {
fetch('http://localhost:5001/api/genre')
.then(function (response) {
return response.json();
})
.then(function (data) {
genres(data);
console.log(genres());
})
};
// INDSÆT GAMMEL FETCH
let showPrev = movie => {
console.log(prev());
getMovies(prev());
}
let enablePrev = ko.computed(() => prev() !== undefined);
let showNext = product => {
console.log(next());
getMovies(next());
}
let enableNext = ko.computed(() => next() !== undefined);
selectedPage.subscribe(() => {
var size = selectedPage()[0];
getMovies(dataservice.getMoviesUrlWithPageSize(size));
});
document.getElementById("scrolltotop").addEventListener("click", function () {
console.log("Clicked!");
$('html,body').animate({scrollTop: $('#scrolltothisdiv').offset().top}, 1000);
});
document.getElementById("prevscrolltotop").addEventListener("click", function () {
console.log("Clicked!");
$('html,body').animate({scrollTop: $('#scrolltothisdiv').offset().top}, 1000);
});
getMovies();
getGenres();
self.optionsAfterRender = function (option, view) {
if (view.defaultView) {
option.className = 'defaultViewHighlight';
}
};
return {
pageSizes,
selectedPage,
movies,
movieList,
showPrev,
enablePrev,
showNext,
enableNext,
genres,
optionsAfterRender,
selectedGenre
};
}
<section class="after-head d-flex section-text-white position-relative">
<div class="top-block top-inner container">
<div class="top-block-content">
<h1 class="section-title">Movies</h1>
<div class="page-breadcrumbs">
<a class="content-link" href="#">Home</a>
<span class="text-theme mx-2"><i class="fas fa-chevron-right"></i></span>
<span>Movies</span>
</div>
</div>
</div>
</section>
<a id="topOfPage"></a>
<a id="top"></a>
<section class="section-long"> <!-- GENRES CONFIG HERE-->
<div class="container">
<div class="section-pannel">
<div class="grid row">
<div class="col-md-10">
<form autocomplete="off">
<div class="row form-grid">
<div class="col-sm-6 col-lg-3">
<div id="scrolltothisdiv"></div>
<div class="input-view-flat input-group">
<select class="form-control" data-bind=
"options: genres,
optionsText: 'name',
value: selectedGenre
">
</select>
</div>
</div>
<div class="col-sm-6 col-lg-3"> <!-- START YEAR AND END YEAR HERE -->
<div class="input-view-flat date input-group" data-toggle="datetimepicker"
data-target="#release-year-field">
<input class="datetimepicker-input form-control" id="release-year-field"
name="releaseYear" type="text" placeholder="release year"
data-target="#release-year-field" data-date-format="Y"/>
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- WRAP DEN HER IN I KNOCKOUT ARRAY -->
<table>
<tbody> <!-- FOR HVER FETCHED -->
<tr>
<td data-bind="foreach: movieList">
<article class="movie-line-entity"> <!-- HVER ARTICLE I TABLE HER CONFIG-->
<div class="entity-poster" data-role="hover-wrap"> <!-- HOVER OVER BILLEDER -->
<div class="embed-responsive embed-responsive-poster">
<img class="embed-responsive-item" data-bind="attr:{src: poster}" alt=""/>
<!-- BILLEDE SRC HER -->
</div>
<div class="d-over bg-theme-lighted collapse animated faster"
data-show-class="fadeIn show" data-hide-class="fadeOut show">
<div class="entity-play"> <!-- NEDENSTÅENDE ER LOGO -->
<svg width="1em" height="1em" viewBox="0 0 16 16"
class="bi bi-box-arrow-up-right" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
<path fill-rule="evenodd"
d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
</svg>
</div>
</div>
</div>
<div class="entity-content">
<h4 class="entity-title">
<a class="content-link" href="movie-info-sidebar-right.html"><span
data-bind="text: title_name"></span></a>
</h4>
<div data-bind="foreach: genre">
<div class="entity-category">
<a class="content-link" href="movies-blocks.html"><span
data-bind="text: $data"></span></a>,
</div>
</div>
<div class="entity-info">
<div class="info-lines"> <!-- RATING -->
<div class="info info-short">
<span class="text-theme info-icon"><i class="fas fa-star"></i></span>
<span class="info-text"><span data-bind="text: rating"></span></span>
<span class="info-rest">/10</span>
</div>
<div class="info info-short"> <!-- RUNTIME -->
<span class="text-theme info-icon"><i class="fas fa-clock"></i></span>
<span class="info-text"><span data-bind="text: runtime"></span></span>
<span class="info-rest"> <span>min</span></span>
</div>
</div>
</div>
<p class="text-short entity-text">
<span data-bind="text: plot"></span>
</p>
</div>
</article>
</td>
</tr>
</tbody>
</table>
<div class="section-bottom"> <!-- PAGING CONFIG HER -->
<div class="paginator">
<div class="navigation-buttons">
<button id="prevscrolltotop" onclick="scrolltotop" type="button" class="btn btn-inverse btn-warning" data-bind="click: showPrev, enable: enablePrev" href="#"> Prev</button>
<button id="scrolltotop" onclick="scrolltotop" type="button" class="btn btn-warning btn-rounded" data-bind="click: showNext, enable: enableNext" href="#">Next</button>
</div>
</div>
</div>
</div>
</section>
define([], () => {
const movieApiUrl = "api/title";
const genreApiUrl = "api/genre";
let getJson = (url, callback) => {
fetch(url).then(response => response.json()).then(callback);
};
let getMovies = (url, callback) => {
if (url === undefined) {
url = movieApiUrl;
}
getJson(url, callback);
};
let getGenres = (url, callback) => {
if(url === undefined) {
url = genreApiUrl;
}
getJson(url, callback)
};
let getMoviesUrlWithPageSize = size => movieApiUrl + "?pageSize=" + size;
return {
getMovies,
getMovie: getJson,
getMoviesUrlWithPageSize,
getGenres
};
您可以添加一个计算的可观察的
filteredMoviesListmoviesListlet filteredMovieList=ko.computed（（）=>{
让templast=ko.toJS（movieList）；
if（this.selectedGenre（））{
templast=templast.filter（movie=>movie.genre==this.selectedGenre（）.name）；
}
返回圣殿骑士；
});
您必须对其进行编辑以匹配您的用例，但类似的解决方案在过去对我有效。祝你好运 您可以添加一个计算可观察的
filteredMoviesListmoviesListlet filteredMovieList=ko.computed（（）=>{
让templast=ko.toJS（movieList）；
if（this.selectedGenre（））{
templast=templast.filter（movie=>movie.genre==this.selectedGenre（）.name）；
}
返回圣殿骑士；
});
define([], () => {
const movieApiUrl = "api/title";
const genreApiUrl = "api/genre";
let getJson = (url, callback) => {
fetch(url).then(response => response.json()).then(callback);
};
let getMovies = (url, callback) => {
if (url === undefined) {
url = movieApiUrl;
}
getJson(url, callback);
};
let getGenres = (url, callback) => {
if(url === undefined) {
url = genreApiUrl;
}
getJson(url, callback)
};
let getMoviesUrlWithPageSize = size => movieApiUrl + "?pageSize=" + size;
return {
getMovies,
getMovie: getJson,
getMoviesUrlWithPageSize,
getGenres
};